4、React Native移动应用开发：从天气应用到组件剖析

React Native移动应用开发：从天气应用到组件剖析

1. 天气应用开发历程

1.1 数据显示与组件构建

在开发天气应用时，首先要实现数据的显示功能。在 WeatherProject.js 中，通过 getInitialState 方法添加模拟数据：

getInitialState() {
  return {
    zip: '',
    forecast: {
      main: 'Clouds',
      description: 'few clouds',
      temp: 45.7
    }
  }
}

为了更好地组织代码，将预报信息的渲染提取到单独的组件 Forecast.js 中：

var React = require('react-native');
var {
  StyleSheet,
  Text,
  View
} = React;
var Forecast = React.createClass({
  render: function() {
    return (
      <View>
        <Text style={styles.bigText}>
          {this.props.main}
        </Text>
        <Text style={