Блог

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

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

В React Native я обрабатываю размеры представления с помощью 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, которые не распознают flex.
Я имею в виду, я не могу этого сделать:

 <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 для divs, чтобы получить результаты в процентах?

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-версия вашего 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>