新建一個 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() 方法的第一步，是封裝數據。因為從API獲得的數據經常不太規范而且某些字段不全。代碼采用簡單手段讓數據變得更便于展示一些。
剩下來的事情就非常簡單了，填充組件的狀態到UI上。
在文件最后加入export語句：
~~~
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}
});
}
~~~
老規矩：返回模擬器，按下 Cmd+R, 點擊搜索結果列表中的某行：
能住得起的房子才是最好的房子——在Pad上看到的這個房子確實很有吸引力！
你的App快接近完成了，最后一步是讓用戶能夠查找距離他們最近的房子。
