父容器内的重叠视图 - React Native答案

【问题标题】：Overlapping views inside a parent container - React Native父容器内的重叠视图 - React Native
【发布时间】：2017-06-17 23:53:31
【问题描述】：

我正在用 react-native 构建一个家庭项目。在使用布局时，父容器内的视图是重叠的。我正在使用 flexbox 来设计表单的布局，但无法通过它。以下是我编写的示例代码，用于解释问题所在。

    <View style= {styles.Container}>

      <View style={{flex:1, backgroundColor:'red'}}><Text>RED</Text></View>
      <View style={{flex:1, backgroundColor:'green'}}><Text>GREEN</Text></View>
      <View style={{flex:1, backgroundColor:'blue'}}><Text>BLUE</Text></View>

    </View>

    Container: {
      flex:1,
      backgroundColor:'grey',
      flexDirection:'column',
    }

【问题讨论】：

标签： javascript css react-native flexbox

【解决方案1】：

对于您发布的代码部分，没有任何问题。也许你没有提供的部分有问题。

这是您在工作示例中的代码：https://repl.it/Iqek

【讨论】：

我修复了 flexbox 导致的错误。它实际上是我设置 flex:1 的容器。删除 flex:1 属性后，它就像一个魅力。