房产售卖信息查询器－React Native实战

转自：http://1ke.co/course/269

如有侵犯，请来信[e-mail]

原作：React Native Tutorial: Building Apps with JavaScript , Colin Eberhardt 2015-3-26 

翻译整理 1ke.co 魔王 文中有改动，以原作为准，不作说明

 

几个月之前，Facebook发布了React Native，用这个框架，我们就可以用Javascript开发原生iOS程序了（安卓版大概几个月后发布）！3月底，Facebook已经放出了官方repository 。

 

我们都在用js和HTML5写App，然后用PhoneGap包好发布到iOS（和安卓）了。 React Native真的好用么？

 

React Native还真就是那么好用。程序猿都为此兴奋无比，主要有以下两个原因：

 

1. 用了React Native， 你的程序尽管用JavaScript写，UI却是本地的，因此无需承受HTML5的UI带来的用户体验损失。
2. React 有特别的构建用户界面的技巧，使得界面成为一个叙述软件工作状态的交流窗口。

 

关键是，React Native是要把React的编程方式带到移动端App开发中。和Java的“开发一次，到处使用”的谎言不同，React主张“学习一次，到处开发”，至少比较现实。本教程暂时只讨论iOS（因为安卓版还没出），但是你看完以后，一定也知道在安卓上怎么用了。

 

如果你只用Objective-C或者Swift开发程序，可能你不会对用JavaScript开发程序有想法。但是作为Swift的开发者，多一门手艺并不是坏事。

 

用过Swift的你，一定掌握了更为有效和规范的算法，更好的控制程序的稳定性和可移植性。但实际上，构建UI的方法和Objective-C并没有多大区别：还是在用UIKit而且别无选择。

 

而我们的React引入了虚拟DOM的概念，将功能性（甚至面向对象）直接带到了UI开发中来。

 

本教程中，咱们来做一个搜索英国房产并生成列表的软件。

 

 

如果你没用过JavaScript也没关系，本会会详解代码。React 用CSS属性来管理样式，很简单，当然如果你有需要的话可以专门去学习一下。

 

好，我们开始吧。

起步

React Native框架就在GitHub上，你可以克隆一个项目，也可以下载一个zip文件。如果并不想看源代码，也可以用命令行来创建一个React Native项目。本教程中，咱们就这么做。

 

React使用Node.js，来构建JavaScript代码。如果没有的话需要装上。

 

先安装Homebrew（本机使用的是MAC，应该不用解释了），然后命令行安装Node.js

brew install node

 

再安装 watchman，Facebook的一款文件监控程序。

brew install watchman

 

有了这个React Native就可以监察文件的变化并重建。就好比每次保存都用Xcode来build一次。

 

接下来就可以用npm安装 React Native CLI（命令行工具）。

npm install -g react-native-cli

 

这就用Node的包管理工具在全局安装了CLI。这方面npm有点像CocoaPods 或者Carthage。

 

创建一个项目目录，然后进入这个目录：

react-native init PropertyFinder

 

这就创建了一个叫做PropertyFinder（找房产）的初始项目，里面包含了构建和运行 React Native 程序所需的所有内容。

 

进入这个目录，你会找到一个node_modules文件夹，这里面放着React Native框架。

 

同时还会找到一个 index.ios.js文件，这就是CLI创建的程序文件的骨架。

 

最后，还会看到一个Xcode项目文件和iOS目录，包含了启动程序必须的相关文件。

 

下面我们build和运行一下这个程序：

 

同时我们会注意到一个窗口跳出来：

=============================================================== |  Running packager on port 8081.        |  Keep this packager running while developing on any JS          |  projects. Feel free to close this tab and run your own       |  packager instance if you prefer.                               |                                                               |     https://github.com/facebook/react-native                  |                                                               ===============================================================Looking for JS files in   /Users/colineberhardt/Temp/TestProjectReact packager ready.

 

这是React Native的包管理程序，在Node下面运行，咱们就知道这是干什么的了。

 

不要关掉这个窗口，让它在后台自己运行。如果不小心关掉了，重新运行Xcode项目就行。

 

注意：我们等一下要写大量的JavaScript代码，最好选一个轻量级的编辑器，推荐Sublime Text，当然你自己可以在网上找找。

Hello React Native

在做房产搜索App之前，咱们先做一个Hello World程序。我们在这里会接触到很多重要的组件。

 

在编辑器中打开index.ios.js，删掉全部内容，然后写下这么一行：

'use strict';

 

启用Strict模式可以增强JavaScript的除错能力并关掉一些不好的功能。

 

然后加上下面这行：

var React = require('react-native');

 

这就把React Native组件调用起来，并赋予React变量。其中require功能和Node.js是一样的。

 

接下来，加上下面这些：

var styles = React.StyleSheet.create({  text: {    color: 'black',    backgroundColor: 'white',    fontSize: 30,    margin: 80  }});

 

这段代码添加了文字的样式。如果你干过web开发，你一定知道这就是CSS。

 

好了，下面真的是app程序了。

class PropertyFinderApp extends React.Component {  render() {    return React.createElement(React.Text, {style: styles.text}, "Hello World!");  }}

 

看到了吗？一个JavaScript类（Class）！

 

类从ECMAScript 6 (ES6)被引入JavaScript。由于JavaScript不断在改进，web开发人员经常因为浏览器兼容性（万恶的IE）而不得不放弃一些功能。React Native有一个JavaScriptCore，因此无需为浏览器兼容性操心。

 

注意：如果你是web开发者，我建议先从新的JavaScript标准出发，然后使用Babel之类的工具兼容旧版浏览器。

 

PropertyFinderApp 继承 React.Component，React UI的基础模块。Component（组件）包含了不可变的property（属性变量），可变的state（状态变量），并提供一个render（渲染）方法。

 

React Native 组件不是UIKit类，而是轻量级的。框架会将React组件树转换为本地UI。

 

最后我们加上这行：

React.AppRegistry.registerComponent('PropertyFinder', function() { return PropertyFinderApp });

 

AppRegistry 定义了程序的入口变量，并提供了根组件。

 

保存好index.ios.js，返回Xcode，确认把PropertyFinder 加进iPhone模拟器，我们重建并运行一下项目。

 

 

这可是本地UI，没有任何浏览器，代码全是JavaScript写的哦！

 

还是不信？：）打开Xcode的Debug\View Debugging\Capture View Hierarchy，是不是哪都找不到UIWebView ，只有一个真正的View！牛啊。

 

 

你一定很好奇是怎么回事。在Xcode中找到application:didFinishLaunchingWithOptions:，这个方法创建了一个RCTRootView，来载入JavaScript并渲染了View。

 

程序一运行，RCTRootView 立刻读取：

http://localhost:8081/index.ios.bundle

来加载程序。

 

现在知道前面弹出来那个窗口是干什么的了吧，就是处理这个东西的。

 

程序启动时，代码会载入JavaScriptCore 框架并执行。在这个程序中，PropertyFinderApp 这个component会被加载并创建一个本地的UIKit视图。后面会详细讲到。

Hello JSX

我们现在的程序使用 React.createElement创建，然后React转换为本地文件。尽管目前我们的js文件很清楚，但随着代码更复杂，各种元素的嵌套会导致代码一团乱麻。

 

在app继续运行的情况下，我们回到index.ios.js，把return改一改：

return <React.Text style={styles.text}>Hello World (again)</React.Text>;

 

这是JSX代码，全称叫做JavaScript syntax extension，使用类似HTML的标签。如果是web开发者，一看就懂。我们全程会大量使用JSX代码。

 

保存文件返回模拟器，按下Cmd+R，我们可以看到“Hello World (again)”，看到没，重新加载React Native程序就跟刷新一下网页一样简单。

 

由于我们的程序使用的是同一套JavaScript文件，以后只需要修改index.ios.js并保存，就可以实现内容的调整。

 

好了，玩够了Hello World，我们来做真正的程序吧。

添加导航控制

我们的寻找房产程序使用和UIKit类似的栈形导航。下面来做这个导航。

 

 在index.ios.js中，我们把PropertyFinderApp 重命名为HelloWorld。

class HelloWorld extends React.Component {

 

Hello World还是会显示，不过已经不是咱们的根组件了。

 

我们在下面加一点真货：

class PropertyFinderApp extends React.Component {  render() {    return (      <React.NavigatorIOS        style={styles.container}        initialRoute={{          title: 'Property Finder',          component: HelloWorld,        }}/>    );  }}

 

这样就添加了一个导航控制器，使用了原本HellowWorld组件的路径和样式。在web开发时，routing（路由或路径）被用来设计程序的导航结构，根据URL来分配页面。

 

然后我们要调整样式：

var styles = React.StyleSheet.create({  text: {    color: 'black',    backgroundColor: 'white',    fontSize: 30,    margin: 80  },  container: {    flex: 1  }});

 

回到Xcode再刷新一次。

 

 

好了现在我们有了导航框架，可以开始在里面做UI了。

构建搜索页面

我们创建一个新文件SearchPage.js，和index.ios.js放在一起。添加如下代码：

'use strict';var React = require('react-native');var {  StyleSheet,  Text,  TextInput,  View,  TouchableHighlight,  ActivityIndicatorIOS,  Image,  Component} = React;

 

前面就不说了，下面那个变量声明你可能没有见过。

 

这叫做destructuring assignment（解构化赋值），可以把对象的多个属性赋给相应变量。于是，之后你就不必使用React这个前缀，比如你可以直接调用StyleSheet 而不是React.StyleSheet。它还可以用来操作数组，非常好用。

 

我们还要添加样式：

var styles = StyleSheet.create({  description: {    marginBottom: 20,    fontSize: 18,    textAlign: 'center',    color: '#656565'  },  container: {    padding: 30,    marginTop: 65,    alignItems: 'center'  }});

 

虽然用css没有Interface Builder那么可视化，但比用viewDidLoad()一个一个设置视图属性可方便多了。：）

 

下面来写组件：

class SearchPage extends Component {  render() {    return (      <View style={styles.container}>        <Text style={styles.description}>          Search for houses to buy!        </Text>        <Text style={styles.description}>          Search by place-name, postcode or search near your location.        </Text>      </View>    );  }}

 

render 可以完美应用JSX的结构。用css我们很容易就实现了这个图形界面：一个容器和两条label。

最后加上：

module.exports = SearchPage;

 

这条命令制定了输出SearchPage 以为他用。

 

下一步就是路由（Routing）的制作。

 

打开index.ios.js，并且在require下面加上这行：

var SearchPage = require('./SearchPage');

 

在PropertyFinderApp 的render里面替换initialRoute ：

component: SearchPage

 

现在可以干掉Hello World这种新手用的东西了，现在我们是高手了。

 

回模拟器我们刷新一下Cmd + R：

 

 

这就是我们的新组件，搜索页SearchPage。

用Flexbox来布局

现在，我们用css调整了margin、padding和颜色，不过你可能对flexbox并不熟悉，这是最近出现的新规范，用来做app的UI布局再好不过了。

 

React Native用的是css-layout库，是flexbox标准的一种javascript实现，可以转化为C（iOS）和Java（安卓）。

 

在App中，默认的排列是依据column（列），所以，子元素默认是垂直排列的。

 

 

这个被叫做主轴（main axis），可以竖着也可以横着。

 

每个子元素的垂直位置由margin、height和padding决定。容器同时将alignItems 设置为center，所以文档是居中的。

 

好了，现在要加上input和button了。打开SearchPage.js并将下面这段插入到第二段text元素后面：

<View style={styles.flowRight}>  <TextInput    style={styles.searchInput}    placeholder='Search via name or postcode'/>  <TouchableHighlight style={styles.button}      underlayColor='#99d9f4'>    <Text style={styles.buttonText}>Go</Text>  </TouchableHighlight></View>

<TouchableHighlight style={styles.button}    underlayColor='#99d9f4'>  <Text style={styles.buttonText}>Location</Text></TouchableHighlight>

 

现在我们有两个顶级视图了，一个有一个输入框和按钮，一个只有按钮。

 

下面我们把样式加进style里面：

flowRight: {  flexDirection: 'row',  alignItems: 'center',  alignSelf: 'stretch'},buttonText: {  fontSize: 18,  color: 'white',  alignSelf: 'center'},button: {  height: 36,  flex: 1,  flexDirection: 'row',  backgroundColor: '#48BBEC',  borderColor: '#48BBEC',  borderWidth: 1,  borderRadius: 8,  marginBottom: 10,  alignSelf: 'stretch',  justifyContent: 'center'},searchInput: {  height: 36,  padding: 4,  marginRight: 5,  flex: 4,  fontSize: 18,  borderWidth: 1,  borderColor: '#48BBEC',  borderRadius: 8,  color: '#48BBEC'}

 

每项属性中用“,”隔开。这些就是输入框和按钮的样式。

 

我们会模拟器刷新一下 Cmd + R。

 

 

输入框和Go按钮在同一行，因为把它们放在了flexDirection: 'row'的容器中。我们并没有明确声明它们的宽度，而是给了一个flex值。输入框flex: 4，而按钮则是 flex: 1，所以它们的宽度比为4:1.

 

你可能已经注意到，这个按钮……并不是按钮。在UIKit中，按钮只不过是可以点击的Label，所以React Native团队决定直接用JavaScript构建按钮。程序中的按钮使用TouchableHighlight这个组件，使得按钮按下时显示透明和不同的颜色。

 

最后我们添上一些图片。看下面的图。在Xcode中，打开 Images.xcassets，点击加号添加图片。接下来鼠标拖动图片到相应的格子。

 

 

这次需要停掉程序并重启，来让图片加载出现。

 

将下面这行添加到location按钮TouchableHighlight 组件的下面：

<Image source={require('image!house')} style={styles.image}/>

 

下面添加图片的样式：

image: {  width: 217,  height: 138}

 

上面的require('image!house') 是为了获取图片的位置。在Xcode中，如果打开Images.xcassets的话，我们会找到房屋图标。

 

返回模拟器刷新一下页面，Cmd + R。

 

注意：如果看不到图片而显示“image!house”的话，重启包管理器（或者命令行npm start）

添加组件state（状态参数）

每一个React组件都有其state状态参数，用来储存关键变量。组件初始化之前要先初始化state。

在SearchPage.js中，在render()上面添加如下代码：

constructor(props) {  super(props);  this.state = {    searchString: 'london'  };}

 

我们的组件现在有了一个state变量，名为searchString值为’london’。

 

然后就可以使用组件的状态了。在Render中，改变TextInput如下代码：

<TextInput  style={styles.searchInput}  value={this.state.searchString}  placeholder='Search via name or postcode'/>

 

我们把输入框的值——也就是用户看到的那个——和我们的state值searchString 绑定起来了。

好了，值是初始化好了，但是，当用户输入时，会发生什么呢？（自己去试试）

 

我们要绑定一个事件，在SearchPage中添加如下方法：

onSearchTextChanged(event) {  console.log('onSearchTextChanged');  this.setState({ searchString: event.nativeEvent.text });  console.log(this.state.searchString);}

 

这样，系统就会取出输入框的值并且替换state的值。

 

下面要把这个方法串进输入框中，要将函数绑定到onChange属性上：

<TextInput  style={styles.searchInput}  value={this.state.searchString}  onChange={this.onSearchTextChanged.bind(this)}  placeholder='Search via name or postcode'/>

 

这样每次用户在输入框中输入，都会触动onChange，并执行onSearchTextChanged。

 

注意：如果不明白bind(this)方法是干什么的，JavaScript处理this关键字与其他语言不太一样，用Swift翻译就是self。用bind是为了确保this指向组件实例。可以自己去试试就明白了。

 

最后，把下面这些记录函数添加到render中，return上面：

console.log('SearchPage.render');

 

这样我们就会明白一些非常神奇的东西。

 

现在刷新一下程序。我们应该可以看到界面中的”london”，并且在命令行中，我们看到：

 

 

嗯……顺序似乎有点问题。

1. 首次启动render
2. 当输入框有变化，启动onSearchTextChanged()
3. 更新state，并引发另一次render
4. onSearchTextChanged()并装入新的搜索内容

 

每次任何state发生变化，React组件会将整个UI全部重新render一遍，这是好的，这就解耦了state与UI状态。

 

在其他的UI框架中，要么你手动更改UI的内容，要么进行双向绑定，比如某些MVVM模式的框架。

 

在React中，你无需担心哪块UI绑到什么地方，整个UI都是state的一个体现。

 

看到这里，你可能已经发现这个模式的缺点了——性能问题！

 

我们总不能每次state有点改动，就把整个UI全部扔掉，然后重新加载吧？好了React在这个问题上相当智能化。每次UI渲染时，都会把render方法返回的视图树，拿去与现存的UIKit视图树作对比。于是对比的结果，就是需要更改的视图树。所以只有改变了的部分需要重新渲染。

 

看到这里我是非常佩服React.js的虚拟DOM给iOS带来的如此特别的合作方式。

 

我们把上面那些日志方法全部删掉，下面我们开始完善程序。

启动搜索功能

要实现搜索功能，我们要处理Go按钮的按下事件，并发出API请求，同时视觉上告诉用户请求正在进行。

 

在 SearchPage.js中，更改初始化state：

this.state = {  searchString: 'london',  isLoading: false};

 

在render中增加如下内容：

var spinner = this.state.isLoading ?  ( <ActivityIndicatorIOS      hidden='true'      size='large'/> ) :  ( <View/>);

 

根据isLoading这个state是否为真，显示活动视图或空视图。

 

在搜索UI的return中，在Image下面，增加：

{spinner}

 

把下面这个属性加到Go按钮的渲染方法中的TouchableHighlight 标签里：

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

 

 

然后在SearchPage 类中加入以下方法：

_executeQuery(query) {  console.log(query);  this.setState({ isLoading: true });}onSearchPressed() {  var query = urlForQueryAndPage('place_name', this.state.searchString, 1);  this._executeQuery(query);}

 

现在的_executeQuery只是写一条日志，将来会完善的。

 

注意： JavaScript的类没有私有前缀，所以前面加个_来表示私有。

 

当Go按钮按下时，程序会执行onSearchPressed()，启动查询。

 

最后，在searchPage类的声明上加上这个工具函数：

function urlForQueryAndPage(key, value, pageNumber) {  var data = {      country: 'uk',      pretty: '1',      encoding: 'json',      listing_type: 'buy',      action: 'search_listings',      page: pageNumber  };  data[key] = value;  var querystring = Object.keys(data)    .map(key => key + '=' + encodeURIComponent(data[key]))    .join('&');  return 'http://api.nestoria.co.uk/api?' + querystring;};

 

这个函数和searchPage没有依赖，所以作为一个独立函数，而不作为类的方法。这个函数先用一个data来储存参数，然后构建查询请求。其中，=>这是个新语法，(参数)=>{函数体}。

 

回到模拟器，按下Cmd + R刷新，点击Go，就会看到滚动图标，然后我们看看后台。

 

 

我们会看到url，复制下来贴进浏览器，我们来看看结果，会看到一大段JSON内容。现在还不用管这些。

 

注意：本教程使用了 Nestoria API 来获取房产信息。相关细节可以参考网站文档。

 

下一步，就是在App内发起请求了。

发起API请求

还是在SearchPage.js，添加一个message变量。

 

this.state = {  searchString: 'london',  isLoading: false,  message: ''};

 

在render中，在底部添加一行：

<Text style={styles.description}>{this.state.message}</Text>

 

这个可以用来显示信息给用户看。

 

在SearchPage 中，添加以下代码到_executeQuery()中：

fetch(query)  .then(response => response.json())  .then(json => this._handleResponse(json.response))  .catch(error =>      this.setState({      isLoading: false,      message: 'Something bad happened ' + error   }));

 

这里用到了fetch方法，来自Web API，提供了一个比XMLHttpRequest更好的API接口。异步回应返回一个promise，带来目标路径以及JSON文档。

 

最后我们来处理返回的文档，把这段加在SearchPage里面：

_handleResponse(response) {  this.setState({ isLoading: false , message: '' });  if (response.application_response_code.substr(0, 1) === '1') {    console.log('Properties found: ' + response.listings.length);  } else {    this.setState({ message: 'Location not recognized; please try again.'});  }}

 

拿掉了isLoading并且做了日志记录。

 

保存起来，然后回模拟器Cmd + R。我们搜索london，应该会看到20条记录在日志里面。然后试一下随便输一个’ narnia’，你会看到如下情况：

 

显示结果

创建一个SearchResults.js，并添加代码如下：

'use strict'; var React = require('react-native');var {  StyleSheet,  Image,   View,  TouchableHighlight,  ListView,  Text,  Component} = React;

 

这一段，看是很眼熟吧？

 

然后是组件本身：

class SearchResults extends Component {   constructor(props) {    super(props);    var dataSource = new ListView.DataSource(      {rowHasChanged: (r1, r2) => r1.guid !== r2.guid});    this.state = {      dataSource: dataSource.cloneWithRows(this.props.listings)    };  }   renderRow(rowData, sectionID, rowID) {    return (      <TouchableHighlight          underlayColor='#dddddd'>        <View>          <Text>{rowData.title}</Text>        </View>      </TouchableHighlight>    );  }   render() {    return (      <ListView        dataSource={this.state.dataSource}        renderRow={this.renderRow.bind(this)}/>    );  } }

 

上面的代码用了一个ListView 组件，用于在可滚动的容器内添加多行内容，有点像UITableView。数据的来源是ListView.DataSource。

 

构建数据源时，需要提供一个函数来对比一对数据。ListView在组建的过程中会调用这个函数，用于编制列表。这次的回传数据中，Nestoria API提供guid ，就刚好适合这个目的。

 

别忘了添加输出模块代码：

module.exports = SearchResults;

 

讲一下这段添加到SearchPage.js中，require下面：

var SearchResults = require('./SearchResults');

 

这样我们就可以在SearchPage  中调用SearchResults 了。

 

编辑_handleResponse 方法：

this.props.navigator.push({  title: 'Results',  component: SearchResults,  passProps: {listings: response.listings}});

 

上面的代码导向SearchResults 页面，并且将结果列表传进去。用push方法将搜索结果传入导航，这样就可以用回退功能返回之前页面。

 

返回模拟器并Cmd + R，你会看到列表：

 

 

当然，这是看不得的，太丑了。

妙手生花

React Native 对你来说应该比较熟了，我们就加快脚步。

 

将代码加到SearchResults.js:中的结构化定义下面：

var styles = StyleSheet.create({  thumb: {    width: 80,    height: 80,    marginRight: 10  },  textContainer: {    flex: 1  },  separator: {    height: 1,    backgroundColor: '#dddddd'  },  price: {    fontSize: 25,    fontWeight: 'bold',    color: '#48BBEC'  },  title: {    fontSize: 20,    color: '#656565'  },  rowContainer: {    flexDirection: 'row',    padding: 10  }});

 

然后把renderRow()替换成下面这些

renderRow(rowData, sectionID, rowID) {  var price = rowData.price_formatted.split(' ')[0];  return (    <TouchableHighlight onPress={() => this.rowPressed(rowData.guid)}        underlayColor='#dddddd'>      <View>        <View style={styles.rowContainer}>          <Image style={styles.thumb} source={{ uri: rowData.img_url }} />          <View  style={styles.textContainer}>            <Text style={styles.price}>£{price}</Text>            <Text style={styles.title}                   numberOfLines={1}>{rowData.title}</Text>          </View>        </View>        <View style={styles.separator}/>      </View>    </TouchableHighlight>  );}

这次，图片使用URL，React Native会负责从主线程中解析。而且rowData.grid使用=>方法来获取。

 

最后一步是处理按下：

rowPressed(propertyGuid) {  var property = this.props.listings.filter(prop => prop.guid === propertyGuid)[0];}

 

刷新一下，我们可以看到：

 

看起来很不错。但是，这个房价根本没人买的起吧。

 

我们准备将最后一个视图做出来。

房产详情视图

新建一个PropertyView.js，然后添加以下代码：

'use strict';var React = require('react-native');var {  StyleSheet,  Image,   View,  Text,  Component} = React;

 

现在，你睡着了都应该写的出来。

 

然后是样式：

var styles = StyleSheet.create({  container: {    marginTop: 65  },  heading: {    backgroundColor: '#F8F8F8',  },  separator: {    height: 1,    backgroundColor: '#DDDDDD'  },  image: {    width: 400,    height: 300  },  price: {    fontSize: 25,    fontWeight: 'bold',    margin: 5,    color: '#48BBEC'  },  title: {    fontSize: 20,    margin: 5,    color: '#656565'  },  description: {    fontSize: 18,    margin: 5,    color: '#656565'  }});

 

接着是组件：

class PropertyView extends Component {  render() {    var property = this.props.property;    var stats = property.bedroom_number + ' bed ' + property.property_type;    if (property.bathroom_number) {      stats += ', ' + property.bathroom_number + ' ' + (property.bathroom_number > 1        ? 'bathrooms' : 'bathroom');    }    var price = property.price_formatted.split(' ')[0];    return (      <View style={styles.container}>        <Image style={styles.image}             source={{uri: property.img_url}} />        <View style={styles.heading}>          <Text style={styles.price}>£{price}</Text>          <Text style={styles.title}>{property.title}</Text>          <View style={styles.separator}/>        </View>        <Text style={styles.description}>{stats}</Text>        <Text style={styles.description}>{property.summary}</Text>      </View>    );  }}

 

render的第一部分对数据做了一些处理，因为很多情况下数据是不完整的。

 

最后别忘了输出：

module.exports = PropertyView;

 

回到SearchResults.js，增加一个require，你懂的：

var PropertyView = require('./PropertyView');

 

改一下rowPressed()来实现PropertyView的导航。

rowPressed(propertyGuid) {  var property = this.props.listings.filter(prop => prop.guid === propertyGuid)[0];  this.props.navigator.push({    title: "Property",    component: PropertyView,    passProps: {property: property}  });}

 

刷新一下，你也懂的。

 

最后一步：让用户搜索附近的房子。

基于地理位置的搜索

在Xcode中，打开 Info.plist并添加新key，右键点击编辑期内并选择Add Row。用NSLocationWhenInUseUsageDescription 作为键名，以下作为键值：

PropertyFinder would like to use your location to find nearby properties

 

以下是完成的plist ：

 

打开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，React有自己的一套实现，用的是iOS原生的位置服务。

 

如果成功获取现在的位置，系统会向Nestoria拉取数据，如果失败，就会显示错误信息。

 

由于改变了plist，这次我们就不能Cmd +R了。重新建立工程并启动吧。

 

在启动位置搜索服务前，我们必须指定一处Nestoria 数据库覆盖的地方。作为测试，我们在模拟器中选择Debug\Location\Custom Location，输入北纬55.02，经度-1.42，这是北英格兰一处安静的港口。

 

今后的路

恭喜你，做出了第一个React Native程序！源代码可以在Github上找到！

 

如果你是web开发的世界过来的，你会发现用javaScript和React做一个本地iOS（几个月后安卓）App是多么简单的事情。

 

也许你下一个App就用这套程序写了？还是说你会坚持用Objective-C或者Swift？不论如何，还是希望本篇文章让你有所收获，并且在下一个项目中有新的理念。

 

如果有任何疑问，欢迎到1ke.co上讨论，或者到原作者Colin Eberhardt论坛提问。本文完成翻译时（2015年6月13日），Andoid版的发布日期暂定在2015年10月。我们拭目以待。