Что эквивалентно React Native {flex: 1} для React JS?

Question

Я много программировал на React Native, и я пробую React js (только веб), и я не знаю, чтобы сделать простой просмотр, который заставит весь экран начать играть со всеми компонентами.

Позвольте мне объяснить:

В React Native я обрабатываю измерения View с помощью flex, что-то вроде этого:

<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 я должен использовать теги 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 работает в React Native таким же образом, как и онделает в CSS в Интернете, за некоторыми исключениями.Значения по умолчанию различны, для flexDirection по умолчанию используется столбец, а не строка, а параметр flex поддерживает только одно число.

В css также необходимо объявить родительский контейнер как

.flex-container {
  display: 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>