新建一个 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快接近完成了，最后一步是让用户能够查找距离他们最近的房子。
