React Native Flexbox Row / Col 问题

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 会占用容器内的可用空间。希望这是有道理的。上周我遇到了同样的问题，你玩得越多就习惯了。 :)