Разделите весь экран на четыре равные части

Question

Я хочу разделить весь экран на 4 равные части, каждая из которых имеет кликабельное действие, и при нажатии на него должно появиться приглашение с текстовым полем и нажатием на кнопку «ОК». Мне нужно отобразить веб-просмотр

Answer 1

Если вы делаете это на реагирующем языке, используйте приведенный ниже код.Это разделит экраны на четыре части, и с TouchableOpacity вы можете использовать отражение событий щелчка, в противном случае вы можете использовать простые View.

<View style={{ flex: 1 }}>
  <View style={{ flex: 1 }}>
    <TouchableOpacity
      style={{ flex: 1, backgroundColor: 'red' }}
      onPress={() => {  }} // Action
    >
    </TouchableOpacity>

    <TouchableOpacity
      style={{ flex: 1, backgroundColor: 'green' }}
      onPress={() => {  }} // Action
    >
    </TouchableOpacity>

  </View>
  <View style={{ flex: 1 }}>
    <TouchableOpacity
      style={{ flex: 1, backgroundColor: 'blue' }}
      onPress={() => {  }} // Action
    >
    </TouchableOpacity>

    <TouchableOpacity
      style={{ flex: 1, backgroundColor: 'yellow' }}
      onPress={() => {  }} // Action
    >
    </TouchableOpacity>

  </View>
</View>

Да, вы можете использовать общие стили и компоненты, но сейчас я используюТак что вы можете легко редактировать и тестировать.

Answer 2

Вы можете использовать vw (ширина области просмотра) и vh (высота области просмотра) и назначать для всех своих элементов

width: "50vw",
height: "50vh"