React native - Как динамически настроить контейнер или ввод текста, который отзывчив для всех устройств.

Question

Я использую реагирующую систему. Мне нужно установить контейнер ввода или поле ввода текста, которое должно быть отзывчивым для всех устройств. Как написать стиль CSS для динамического расчета ширины и высоты.

См. Скриншот для поля ввода шириной 375 и высотой 27, разработанного в iPhone 7 plus.

Answer 1

Для этого есть много хитростей:

1 - в процентах:

<View
  style={{
    width: '80%',
    justifyContent: 'center',
    alignItems: 'center', 
  }}
>
  <TextInput
    style={{
      width: '100%',
      height: 27,
    }}
  />
</View>

идея заключается в том, чтобы поместить TextInput (который имеет ширину 100% и фиксированную высоту = 27) внутри View (контейнер), а затем задать ширину для контейнера ввода текста, используя процент ( например, 90% или 80% ...)

Для лучших практик , в случае TextInput стараться всегда использовать процент для ширина и фиксированное значение для высота

2 - Использование размеров

<View
  style={{
    width: Dimensions.get('window').width,
    justifyContent: 'center',
    alignItems: 'center', 
  }}
>
  <TextInput
    style={{
      width: '100%',
      height: 27,
    }}
  />
</View>

здесь мы вычислили ширину экрана и установили ширину контейнера ввода текста

Конечно, вы должны импортировать Размеры из реактивной системы

import { Dimensions } from 'react-native'

Но я предпочитаю использовать первое решение

Answer 2

React Native использует стилевую опору, которая может содержать множество очень CSS-подобных атрибутов. Ширина, например, очень похожа на то, что вы найдете в документах MDN для атрибута ширины CSS. Вы можете добиться отзывчивости, используя ширину в процентах:

style = {{ width: '100%' }}

... или используя flexbox. Подробнее об этом ниже.

https://facebook.github.io/react-native/docs/height-and-width