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。

Flexbox布局本机反应-第一个视图占据整个屏幕

1 个答案: