現在，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>
);
}
~~~
其中價格將以‘300,000 GBP’的格式顯示，記得將GBP 后綴刪除。上述代碼用你已經很熟悉的方式來渲染單元格UI。縮略圖以URL方式提供，React Native 自動將其解碼（主線程中）。
在TouchableHightlight組件的onPress屬性中再次使用了箭頭函數，并將該行數據的guid作為傳遞的參數。
最后一個方法，用于處理點擊事件
~~~
rowPressed(propertyGuid) {
var property = this.props.listings.filter(prop => prop.guid === propertyGuid)[0];
}
~~~
這里，當用戶點擊某行時，通過guid去房產列表中找到對應的房屋信息。
回到模擬器，按下 Cmd+R ，觀察運行結果：
這下看起來好多了——只不過，那些住在London的人居然住得起這么貴房子？真是令人難以置信！
接下來，我們就來實現App的最后一個界面了。
