javascript - React Native { flex : 1 } for React JS? 等价于什么

Question

我已经在 React Native 中进行了大量编程，并且正在尝试 React js(仅限 Web)，但我不知道如何制作一个简单的 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 的样式来获取百分比结果？

Answer 1

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

在 React 中，您正在使用 CSS flexbox - https://developer.mozilla.org/en-US/docs/Glossary/Flexbox

Flexbox works the same way in React Native as it does in CSS on the web, with a few exceptions. The defaults are different, with flexDirection defaulting to column instead of row, and the flex parameter only supporting a single number.

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

.flex-container {
  display: flex;
}

这可能就是您所缺少的。

你的Flex的纯CSS版本可能看起来像这样(样式为“字符串”版本):

<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>