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

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

如有侵犯，请来信oiken@qq.com

原作：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/TestProject


React 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月。我们拭目以待。