как сделать так, чтобы макет адаптировался к размеру экрана в реакции родного?

Question

Я хотел знать, как я могу сделать так, чтобы объекты макета можно было настраивать под разные размеры экранов мобильных телефонов или планшетов.

Например:

ЕслиЯ собираю дизайн для небольшого экрана (Nexus S), он хорошо выглядит на этом экране, но если я эмулирую в пикселе 2 XL, вы видите все маленьким.

Как я могу адаптировать элементы или какое свойство используетсяподходит для всех размеров экрана?

Answer 1

Простой ответ - добавить функцию, которая регулирует размеры (или размер шрифта) в зависимости от размера экрана.но из моего личного опыта я бы не советовал использовать его, так как вы могли бы в конечном итоге получить огромные картинки или тексты для больших телефонов и планшетов.В настоящее время я использую response-native-extended-stylesheet , который предлагает отличную поддержку media-queries, variables, dynamic themes, relative units, percents, math operations, scaling and other styling stuff

Ваш код будет выглядеть примерно так:

const styles = EStyleSheet.create({
  column: {
    width: '80%'                                    // 80% of screen width
  },
  text: {
    color: '$textColor',                            // global variable $textColor
    fontSize: '1.5rem'                              // relative REM unit
  },
  '@media (min-width: 350) and (max-width: 500)': { // media queries
    text: {
      fontSize: '2rem',
    }
  }
});