查看房屋详情

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