Отзывчивый React-родной веб-макет

Question

Я пытаюсь создать макет панели мониторинга из собственного проекта.Идея состоит в том, чтобы большая часть кода была похожа для Android, iOS и Web, только макет или стиль навигации изменятся.Но я нахожу, что сделать этот тип макета в Интернете легко, но сделать его адаптивным без повторного рендеринга сложно.

Я достиг этого, вручную вычислив высоту и ширину окон, следуя коду

Dimensions.get('window').width Dimensions.get('window').height

, и с помощью eventListener продолжаю обновлять состояние, чтобы оно снова отображалосьвсю страницу снова и снова.

Dimensions.addEventListener("change", this.updateScreen);

Есть ли способ, которым я могу просто использовать некоторое значение%, чтобы заполнить экран.Прямо сейчас, если я использую%, это сжато к ребенку View размера.Я даже попробовал flex:1 с alignSelf:stretch, alignItem:stretch, width:'100%' и т. Д., Но безуспешно.

Некоторое время давайте поговорим о центральном ряду (изображение прилагается), который содержит 3 столбца.Я хочу, чтобы левый и правый блок («Меню и призыв к действию») составляли 300 пикселей каждый.Теперь, если я на мониторе шириной 1000 пикселей, мой блок контента должен быть (1000 - (300 + 300)) 400 пикселей.если монитор имеет разрешение 1200 пикселей, блок контента будет (1200 - (300 + 300)) 600 пикселей.

Answer 1

Надеюсь, это не слишком поздно.

  <View style={{ flex: 1 }}>
    <View style={{ height: 100, backgroundColor: 'red' }} />

    <View style={{ flex: 1, backgroundColor: 'gray', flexDirection: 'row' }}>
      <View style={{ width: 100, backgroundColor: 'green' }} />
      <View style={{ flex: 1, backgroundColor: 'blue' }} />
      <View style={{ width: 100, backgroundColor: 'green' }} />
    </View>

    <View style={{ height: 100, backgroundColor: 'red' }} />
  </View>

Это результат вышеприведенного кода.

Вам не нужно делать процентные вычисления вообще;просто структурируйте его в 2 слоя гибкого макета.

Для компонентов, которые не должны растягиваться, укажите их ширину.В остальном укажите значение flex.

Если вы настаиваете на использовании 1 слоя для обработки всего этого, мы обсудим снова.

Cheers.