反応のネイティブを使用するときにディスプレイが表示されません

Question

私は読んでいますボニーエイゼンマンによって習得するリアクションネイティブ、WeatherProjectチュートリアルの第3章に問題があります。アプリケーションがiOSシミュレータに読み込まれると、ここでWeatherProject.js

からForecast.jsの内容をレンダリングするが、何もせずにディスプレイ全体を占有する私のコードは次のとおりです。

index.ios.js

import { 
    AppRegistry, 
} from 'react-native'; 

import WeatherProject from './WeatherProject'; 

AppRegistry.registerComponent('WeatherProject',() => WeatherProject); 

WeatherProject.js

import React, { 
    Component, 
} from 'react'; 

import { 
    StyleSheet, 
    Text, 
    View, 
    TextInput, 
} from 'react-native'; 

var Forecast = require('./Forecast'); 

var styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    justifyContent: 'center', 
    alignItems: 'center', 
    backgroundColor: '#4D4D4D' 
    }, 
    welcome: { 
    fontSize: 20, 
    textAlign: 'center', 
    margin: 10 
    }, 
    input: { 
    fontSize: 20, 
    borderWidth: 2, 
    height: 40 
    } 
}); 

var WeatherProject = React.createClass({ 

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

    _handleTextChange(event) { 
    console.log(event.nativeEvent.text); 
    this.setState({ 
     zip: event.nativeEvent.text 
    }); 
    }, 

    render() { 
    return (
     <View style={styles.container}> 
     <Text style={styles.welcome}> 
      You input {this.state.zip}. 
     </Text> 
     <Forecast 
      main={this.state.forecast.main} 
      description={this.state.forecast.description} 
      temp={this.state.forecast.temp}/> 
     <TextInput 
      style={styles.input} 
      returnKeyType="go" 
      onSubmitEditing={this._handleTextChange}/> 
     </View> 
    ); 
    } 
}); 

module.exports = WeatherProject; 

Forecast.js

import React, { 
    Component, 
} from 'react'; 

import { 
    StyleSheet, 
    Text, 
    View, 
} from 'react-native'; 

var styles = StyleSheet.create({ 
    bigText: { 
    flex: 2, 
    fontSize: 20, 
    textAlign: 'center', 
    margin: 10, 
    color: '#FFFFFF' 
    }, 
    mainText: { 
    flex: 1, 
    fontSize: 16, 
    textAlign: 'center', 
    color: '#FFFFFF' 
    } 
}); 

var Forecast = React.createClass({ 

    render() { 
    return (
     <View> 
      <Text style={styles.bigText}> 
      {this.props.main} 
      </Text> 
      <Text style={styles.mainText}> 
      Current conditions: {this.props.description} 
      </Text> 
      <Text style={styles.bigText}> 
      {this.props.temp}°F 
      </Text> 
     </View> 
    ); 
    } 
}); 

module.exports = Forecast; 

期待される結果が（書籍から）次のようになります。

しかし、私の実際の結果がこれです：

そして、ここでビューのデバッグ階層です：

すべての任意の助けいただければ幸いです。

Answer 1

は、予測にこのスタイルを追加します。

<View styles={style.container}>