Flexbox布局第一个视图占据整个屏幕

Question

我正在尝试制作一个简单的单页反应原生应用程序。只是为了检查我的flexbox布局是否正常工作，我决定提供背景色并检查它们是否对齐。如图所示，第一个视图占据了整个空间。我哪里错了？我的输出如所示

输出

这是我的代码：

render() {
return (
<View style={styles.container}>
<View style={styles.questionview}>
<Text>Enter a word to get meaning</Text>
<TextInput onChangeText={(text)=> this.setState({word:text})}/>
<Button title={"GET MEANING"} onPress={this.buttonPressed}/>
</View>
<View styles={styles.ansview}>
<Text styles={styles.anstext}>{this.state.answer}</Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex:1
},
questionview:{
flex:6,
backgroundColor:'red',
padding:30
},
ansview:{
flex:3,
backgroundColor:'green'
}
});

Answer 1

我花了一些时间，但发现了您的问题。这是个打字错误。

它应该只是"样式"，而不是"样式"。应该如下所示：

<View style={styles.ansview}>
<Text style={styles.anstext}>{this.state.answer}</Text>
</View>

此外，代码中不存在styles.anstext。