1

我有一个文件 weatherProject.js ：

        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>
        );
    }

});

var styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },

    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    input: {
        fontSize: 20,
        borderWidth: 2,
        height: 40
    }
});

weatherProject 需要预测模块var Forecast = require('./Forecast');：

var Forecast = React.createClass({
    render: function() {
        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>*/
            <View>
                <Text style={styles.bigText}>
                    {this.props.main}
                </Text>
                <Text>
                    Current conditions: {this.props.description}
                </Text>
                <Text>
                    {this.props.temp}°F
                </Text>
            </View>
        );
    }
});

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

module.exports = Forecast;

但是，在集成了预测模块后，我在 android 虚拟手机上看不到文本和输入。我的猜测是它来自样式和 flexbox，因为代码编译得很好，如果我删除 flex: 1 语法，它会显示文本，为什么根据你的说法，现在的代码在屏幕上没有显示任何内容？（我的 avd 机器是 Nexus 4 型号）

感谢您的帮助

4

0 回答 0