css - React Native Flexbox 行/列问题

Question

谁能解释一下在这种情况下发生了什么:

采用以下 HTML 中的基本 flex 布局:

 <div style="background-color:grey;  ">
      <div style="padding:5px; background-color:red; display:flex">
        <div style="flex:3; background-color:blue">
          hi
        </div>
        <div style="flex:1; background-color:yellow">
          do
        </div>
      </div>
    </div>

如预期的那样呈现 -

我想在 React Native 元素中使用类似的结构，但它的呈现方式完全不同:

代码如下:

  <View
    style={{flexDirection: 'column', padding: 5, backgroundColor: 'red'  }}>
    <View style={{backgroundColor: 'blue', flex:1}}><Text>hi</Text></View>
    <View style={{backgroundColor: 'yellow', flex:2}}><Text>do</Text></View>
  </View>

这仅显示红色列 - 里面的内容消失了。

但是，如果我将 flexDirection 切换为“行”，它会像您期望的“列”一样工作。即 -

今天下午我很困惑!谁能解释一下这是怎么回事!？

Answer 1

在 React Native 中，默认为 FlexDirection设置为列。这是有道理的，因为您可以看到大多数应用程序都在空间中进行垂直滚动。

在您的第一段代码中，父组件占用了所有可用空间，因此您看不到内部元素。

当您将代码设置为行时，Views 会占用容器内的可用空间。希望这是有道理的。上周我遇到了同样的问题，你玩得越多就会习惯它。 :)