什么相當於React JS的React Native {flex：1}？

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中使用這些樣式來獲取百分比結果？

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在React Native中的工作方式與在Web上的CSS中的工作方式相同，但有一些例外。 默認值不同，flexDirection默認為列而不是行，flex參數僅支持單個數字。

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