ReactNavtive框架教程（4）

开头的响应码， 这些代码都很实用。

比如202 和 200表示返回一个推荐位置的列表。当完毕这个实例后。你能够尝试处理这些返回码。并将列表提供给用户选择。

保存，返回模拟器，按下Cmd+R ，然后搜索 ‘london’你将在控制台看到一条消息。表示搜索到20条房子信息。

尝试输入一个不存在的地名，比方 ‘narnia’ 你将看到例如以下信息：

展现搜索结果

新建一个文件： SearchResults.js, 编写例如以下代码：

'use strict';

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

var {

StyleSheet,

Image,

View,

TouchableHighlight,

ListView,

Text,

Component

} = React;

一条requires语句和一个结构赋值。

定义一个Componet子类：

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 ——该组件很像ITableView。通过ListView.DataSource, 我们能够向ListView提供数据。renderRow函数则用于为每一个行提供UI。

在构建数据源的时候，我们使用箭头函数对不同的行进行识别。这个函数在ListView进行“一致化”的时候被调用。以便推断列表中的数据是否被改变。在本例中，NestoriaAPI有一个guid属性。刚好能够用来作为推断的标准。

最后，添加一条模块输出语句：

module.exports = SearchResults;

SearchPage.js 头部。require 下方添加:

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

这样我们就能够 SearchPage 类中使用SearchResults类了。

在_handleResponse 方法，将console.log 一句替换为:

this.props.navigator.push({

title: 'Results',

component: SearchResults,

passProps: {listings: response.listings}

});

上述代码将导航至SearchResults 页面，并将请求到的列表数据传递给它。Push方法能够将页面添加到导航控制器的ViewController堆栈中，同一时候你的导航栏上将出现一个Backbutton。点击它能够返回到上一页面。

回到模拟器, 按下Cmd+R ，进行一个查找动作。

你将看到搜索结果例如以下：