码迷,mamicode.com
首页 > 其他好文 > 详细

ReactNavtive框架教程(6)(完)

时间:2015-08-08 22:52:46      阅读:139      评论:0      收藏:0      [点我收藏+]

标签:ios   移动开发   

原文: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自身的问题吧!如果读者遇到同样的问题并找出原因,请告知我们。

唉,尽管这里的房屋价格不像伦敦那么贵—但也不是我所能承受的:]

ReactNavtive框架教程(6)(完)

标签:ios   移动开发   

原文地址:http://blog.csdn.net/kmyhy/article/details/47363103

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!