ReactNavtive框架教程(6)(完)

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

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

时间: 2024-10-12 11:44:04

ReactNavtive框架教程(6)(完)的相关文章

ReactNavtive框架教程(1)

原文:http://www.raywenderlich.com/99473/introducing-react-native-building-apps-javascript 注意:所有图片放在了百度相册空间,如果你看不到图片,请复制图片URL,然后粘贴到地址栏中进行查看. 开始 ReactNative 框架可以在GitHub 获得,你可以使用git clone命令或者直接下载zip包来获取它. ReactNative 使用了 Node.js,如果你的机器上没有安装Node.js,请先安装它.

ReactNavtive框架教程(3)

原文:http://www.raywenderlich.com/99473/introducing-react-native-building-apps-javascript 注意:所有图片放在了百度相册空间,如果你看不到图片,请复制图片URL,然后粘贴到地址栏中进行查看. 接着,在styles中增加如下样式: flowRight: { flexDirection: 'row', alignItems: 'center', alignSelf: 'stretch' }, buttonText:

ReactNavtive框架教程(2)

原文:http://www.raywenderlich.com/99473/introducing-react-native-building-apps-javascript 注意:所有图片放在了百度相册空间,如果你看不到图片,请复制图片URL,然后粘贴到地址栏中进行查看. Hello World JSX 前面我们用React.createElement构建了一个简单的UI ,React 会将之转换为对应的本地对象.但对于复杂UI来说(比如那些组件嵌套的UI),代码会变得非常难看. 确保App保

ReactNavtive框架教程(4)

原文:http://www.raywenderlich.com/99473/introducing-react-native-building-apps-javascript 注意:所有图片放在了百度相册空间,如果你看不到图片,请复制图片URL,然后粘贴到地址栏中进行查看. 开始搜索 为了实现搜索概念,我们需要处理Go按钮点击事件,创建对应的API请求,显示网络请求的状态. 打开SearchPage.js, 在constructor方法中修改state的初始化代码: this.state = {

信号处理必读的文章(-)—傅里叶分析之掐死教程(完整版)_转载至知乎

傅里叶分析之掐死教程(完整版)更新于2014.06.06 http://zhuanlan.zhihu.com/p/19763358 作 者:韩 昊 知 乎:Heinrich 微 博:@花生油工人 知乎专栏:与时间无关的故事 谨以此文献给大连海事大学的吴楠老师,柳晓鸣老师,王新年老师以及张晶泊老师. 转载的同学请保留上面这句话,谢谢.如果还能保留文章来源就更感激不尽了. ——更新于2014.6.6,想直接看更新的同学可以直接跳到第四章———— 我保证这篇文章和你以前看过的所有文章都不同,这是12年

Java - Struts框架教程 Hibernate框架教程 Spring框架入门教程(新版) sping mvc spring boot spring cloud Mybatis

https://www.zhihu.com/question/21142149 http://how2j.cn/k/hibernate/hibernate-tutorial/31.html?tid=63 https://www.zhihu.com/question/29444491/answer/146457757 1. Java - Struts框架教程Struts 是Apache软件基金会(ASF)赞助的一个开源项目.通过采用JavaServlet/JSP技术,实现了基于Java EEWeb

Quartz 框架 教程(中文版)2.2.x

Quartz 框架 教程(中文版)2.2.x 之第一课 开始使用Quartz框架 Quartz 框架 教程(中文版)2.2.x 之第二课 Quartz API,Jobs和Triggers简介 Quartz 框架 教程(中文版)2.2.x 之第三课 更多关于Jobs和JobDetails Quartz 框架 教程(中文版)2.2.x 之第四课 更多关于Triggers Quartz 框架 教程(中文版)2.2.x 之第五课 SimpleTrigger Quartz 框架 教程(中文版)2.2.x

tinyshop框架教程已在腾讯课堂开课

php就业网简介:www.php91.net,专注于Thinkphp框架教程的php框架学习中心.同时也有小崔老师自学php的教程,与你一起成长哦 同时,php就业网教程部分:http://www.php91.net/,后期为php爱好者,提供从php基础入门到精通的教程,包括现代化的php工程师要学习的框架:symfony框架教程,php史上最难的框架.小崔老师会为你讲解php设计模式.Symfony框架,让你在php学习的路上搬开一个大大的垫脚石! 具体可以访问:   https://ke.

python Django Wbe框架教程

python  Django Wbe框架教程 一.简介 Django 中提供了开发网站经常用到的模块,常见的代码都为你写好了,通过减少重复的代码,Django 使你能够专注于 web 应用上有 趣的关键性的东西.为了达到这个目标,Django 提供了通用Web开发模式的高度抽象,提供了频繁进行的编程作业的快速解决方法,以及为“如何解决问题”提供了清晰明了的约定.Django的理念是DRY(Don't Repeat Yourself)来鼓励快速开发! 让我们一览 Django 全貌 urls.py