跟我学用REACT NATIVE构建原生应用（六）

由Goofy发布在前端开发

本文案例、代码及主要内容基于知乎前端专栏翻译的文章《深入浅出React Native：使用JavaScript构建原生应用》《Introducing React Native: Building Apps with JavaScript》而写。

在原文的基础上做了一些校对，并增加了android得环境安装和调试的内容。

由我书写的注释将会显示左边这个紫色竖线（#523f6d），而原文的注释为蓝色的（#559bce）。

内容传送门

一、《深入浅出R跟我学用React Native构建原生应用（一）
二、《深入浅出R跟我学用React Native构建原生应用（二）
三、《深入浅出R跟我学用React Native构建原生应用（三）
四、《深入浅出R跟我学用React Native构建原生应用（四）
五、《深入浅出R跟我学用React Native构建原生应用（五）
六、《深入浅出R跟我学用React Native构建原生应用（六）

地理位置搜索

在 Xcode 中，打开 Info.plist 添加一个新的 key，在编辑器内部单击鼠标右键并且选择 Add Row。使用NSLocationWhenInUseUsageDescription 作为 key 名并且使用下面的值：

PropertyFinder would like to use your location to find nearby properties

下面是当你添加了新的 key 后，所得到的属性列表：

你将把这个关键的细节提示呈现给用户，方便他们请求访问当前位置。

打开 SearchPage.js，找到用于渲染 Location 按钮的TouchableHighlight，然后为其添加下面的属性值：

onPress={this.onLocationPressed.bind(this)}

当你用手指轻点这个按钮，会调用 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 所定义的接口，所以对于每个在浏览器中使用 location 服务的用户来说这个接口都应该是一致的。React Native 框架借助原生的 iOS location 服务提供了自身的 API 实现。

如果当前位置很容易获取到，你将调用第一个箭头函数；这会向Nestoria 发送一个 query。如果出现错误则会得到一个基本的出错信息。

因为你已经改变了属性列表，你需要重新启动这个应用以看到更改。抱歉，这次不可以 Cmd+R。请中断 Xcode 中的应用，然后创建和运行项目。

在使用基于位置的搜索前，你需要指定一个被 Nestoria 数据库覆盖的位置。在模拟器菜单中，选择 Debug\Location\Custom Location … 然后输入 55.02 维度和 -1.42 经度，这个坐标是英格兰北部的一个景色优美的海边小镇，我经常在那给家里打电话。

55ccd1213bb3d057685335156f7b7ccd_b

警示：我们可以正常地使用位置搜索功能，不过可能有部分同学不能使用（在访问时返回 access denied 错误）—— 我们尚不确定其原因，可能是 React Native 的问题？如果谁遇到了同样的问题并且已经结果，烦请告诉我们。这里没有伦敦那样值得炫耀 —— 不过更加经济！:]

下一步行动？

完成了第一个 React Native 应用呢，恭喜你！你可以下载本教程的完整代码，亲自来试试看。

如果已经接触过 Web 开发了，你会发现使用 JavaScript 和 React 来定义与原生 UI 相连接的接口和导航是多么地容易。而如果你曾经开发过原生 App，我相信在使用 React Native 的过程里你会感受到它种种好处：快速的应用迭代，JavaScript 的引入以及清晰地使用 CSS 定义样式。

也许下次做 App 的时候，你可以试试这个框架？或者说，你依然坚持使用 Swift 或者 Objective-C？无论之后你的选择是怎么样的，我都希望读完这篇文章的你有所收获，还能把这些收获融入到你的项目当中是最好的啦。

如果你对这篇教程有任何疑问，请在这篇文章的讨论区留言！
原文：Introducing React Native: Building Apps with JavaScript

发表回复