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

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