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

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


react-native javascript responsive-design
person Ashwin    schedule 04.10.2018    source источник
comment
вы можете использовать эту библиотеку github.com/vitalets/react-native-extended-stylesheet   -  person Nima    schedule 05.10.2018

Ответы (3)


arrow_upward
2
arrow_downward

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

Пример вертикального поля:

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; 
}

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

person Tim    schedule 04.10.2018
comment
Я пробовал это, но все еще обнаруживал проблему с масштабированием карточек и кнопок на устройствах Android :( - person Ashwin; 05.10.2018
comment
Вышеупомянутая методология работает с полями, отступами и размерами шрифта. Для представлений и кнопок (ширины и высоты) вы должны использовать стандартный flex -макет возможности. - person Tim; 05.10.2018

arrow_upward
1
arrow_downward

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

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

react-native-lightweight-responsive — это так просто.

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

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

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

person Lanon    schedule 27.05.2019

arrow_upward
0
arrow_downward

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

person Muhammad Shareyar    schedule 04.10.2018