新建一個文件： 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進行“一致化”的時候被調用，以便判斷列表中的數據是否被改變。在本例中，Nestoria API有一個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堆棧中，同時你的導航欄上將出現一個Back按鈕，點擊它可以返回到上一頁面。
回到模擬器, 按下Cmd+R ，進行一個查找動作。你將看到搜索結果如下：
好了，房子清單已經列出來了，不過列表有一點丑陋。接下來我們會讓它變得漂亮一點。
