javascript - React JS 中相当于 React Native 的 { flex: 1 } 的是什么？

我一直在大量使用 React Native 编程，现在我正在尝试 React js（仅限网页），但是我不知道如何创建一个简单的 View 来占满整个屏幕，以便开始使用所有组件进行操作。

让我解释一下：

在 React Native 中，我使用 flex 来处理 View 的尺寸，类似这样：

<View style={{ flex: 1 }}>
    <View style={{ flex: 0.5, backgroundColor: 'blue' }}>
      <Text>I'm a blue 50% screen View!</Text>
    </View>
    <View style={{ flex: 0.5, backgroundColor: 'yellow' }}>
      <Text>I'm a yellow 50% screen View!</Text>        
    </View>
</View>

但在 React JS 中，我必须使用不支持 flex 的 div 标签。我的意思是，我不能这样做：

<div style={{ flex: 1 }}>
    <div style={{ flex: 0.5, backgroundColor: 'blue' }}>
      <p>I'm a blue 50% screen View!</p>
    </div>
    <div style={{ flex: 0.5, backgroundColor: 'yellow' }}>
      <p>I'm a yellow 50% screen View!</p>        
    </div>
</div>

我如何在 React js 中使用这些样式，让 div 获得百分比结果？

答案＃1

React Native 使用其自己的 flexbox 实现 - https://facebook.github.io/react-native/docs/flexbox

在 React 中，你正在使用 CSS 弹性盒布局 - https://developer.mozilla.org/en-US/docs/Glossary/Flexbox

在 React Native 中，Flexbox 的工作方式与网页上的 CSS 相同，但有一些例外。默认值有所不同，flexDirection 的默认值是列（column）而不是行（row），并且 flex 参数仅支持单个数字。

在 CSS 中，你还需要将父容器声明为

.flex-container {
  display: flex;
}

而这可能正是你所缺少的。

你纯 CSS 版本的 flex 大概会像这样（样式作为“字符串”版本）：

<div style="display: flex; flex-direction: column; height: 100vh;">
    <div style="flex: 1; background-color: blue;">
      <p>I'm a blue 50% screen View!</p>
    </div>
    <div style="flex: 1; background-color: yellow;">
      <p>I'm a yellow 50% screen View!</p>        
    </div>
</div>