Адаптивные экраны для React Native

Question

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

Answer 1

Помимо использования системы гибкого макета, я до сих пор писал функцию масштабирования, которая адаптирует поля и размеры шрифта к разным размерам экрана.

Пример вертикальной маржи:

const HEIGHT_SCALE = 667; // this is the standard iphone 7 height, but you can use a different height as your standard height. 
const scaleMargins = (margin) => {
    const ratio = margin / HEIGHT_SCALE; 
    const newScale = Math.round(ratio * SCREEN_WIDTH);
    return newScale; 
}

const MARGIN_15 = scaleMargins(15);

Пример использования:

<Text style={{ marginTop: MARGIN_15, marginBottom: MARGIN_15 }}>
Your Text with adaptive margins goes here
</Text>

Преимущества

Функцию scaleMargins можно также адаптировать для получения адаптивных размеров шрифта или горизонтальных полей / отступов.Поэтому просто используйте другой коэффициент масштабирования.Для горизонтального поля вы можете использовать эту функцию масштабирования:

const WIDTH_SCALE = 375; // Standard iphone 7 screen width. You can get it from Dimension.get('screen').width 
const scaleVerticalMargins = (margin) => {
    const ratio = margin / WIDTH_SCALE; 
    const newScale = Math.round(ratio * SCREEN_WIDTH);
    return newScale; 
}

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

Answer 2

Во-первых, вы должны понять flexbox , а затем сделать ваш компонент хорошо видимым на всех устройствах.

В этом процессе вам может помочь некоторая библиотека.

response-native-lightweight-response очень прост.

import Responsive from 'react-native-lightweight-responsive';

<View style={{
  width: Responsive.width(300),
  height: Reponsive.width(300),
}}/>

Приведенные выше коды сделают ваши компоненты одинаково видимыми на всех устройствах.

Answer 3

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