原文:http://www.raywenderlich.com/99473/introducing-react-native-building-apps-javascript
注意:所有图片放在了百度相册空间,如果你看不到图片,请复制图片URL,然后粘贴到地址栏中进行查看。
根据位置查找
在Xcode中打开 Info.plist ,右键,Add Row,增加一个key。 使用NSLocationWhenInUseUsageDescription 作为键名,使用
PropertyFinder would like to use your location to find nearby properties作为键值。
这个key用于提示用户允许App使用他们的当前位置。
打开 SearchPage.js, 找到TouchableHighlight 中渲染 ‘Location’ 按钮的代码,加入下列属性值:
onPress={this.onLocationPressed.bind(this)}
这样,当点击Location按钮,会调用 onLocationPressed 方法。
在SearchPage 类中,增加方法:
onLocationPressed() {
navigator.geolocation.getCurrentPosition(
location => {
var search = location.coords.latitude + ‘,‘ + location.coords.longitude;
this.setState({ searchString: search });
var query = urlForQueryAndPage(‘centre_point‘, search, 1);
this._executeQuery(query);
},
error => {
this.setState({
message: ‘There was a problem with obtaining your location: ‘ + error
});
});
}
navigator.geolocation可获取当前位置。这个方法定义在 Web API中,这对于曾经在浏览器中使用过位置服务的人来说并不陌生。React Native 框架用本地iOS服务重新实现了这个API。
如果当前位置获取成功,我们将调用第一个箭头函数,否则调用第二个箭头函数,我们简单显示错误信息。
因为我们修改了plist文件,因此我们需要重新启动App,而不能仅仅是Cmd+R了。请在Xcode中终止App,然后重新编译运行App。
在使用基于地理定位的搜索之前,我们需要指定一个Nestoria数据库中的默认位置。在模拟器菜单中,选择Debug\Location\Custom Location … 然后输入 55.02的纬度和-1.42的经度。这是一个位于英格兰北部的海边小镇。
Ray注:
在我们测试过程中,地理定位查找有时有效,有时无效,有时候我们授权App使用地理定位后仍然会报权限错误。我们不知道这是为什么,可能是React
Native自身的问题吧!如果读者遇到同样的问题并找出原因,请告知我们。
唉,尽管这里的房屋价格不像伦敦那么贵—但也不是我所能承受的:]