Адаптивное поведение в реагировании нативных стилевых компонентов

Question

Я пытался найти способ адаптивных размеров и добавления / удаления контента с экрана в зависимости от размера. В реагирующих на носитель медиа-запросах не существует, ни em / rem для размеров, любой может поделиться своим опытом, реализовав макеты, например:

• На небольшом экране показывают одну кнопку, но в таблице3 кнопки?
• на маленьком экране размер шрифта 16, но в таблице должно быть 24

Answer 1

добро пожаловать в SO. для отзывчивости я использовал эту библиотеку RN-отзывчивую , что очень просто. Предположим, у вас есть компонент с height:100 and width:200 , и ваш размер экрана составляет 360 * 640. поэтому вам нужно заменить высоту и ширину на

height:hp("15.6%") // 100/640 = 15.6
width:wp("55.5%") //200/360 = 55.5

В противном случае, если вы не хотите использовать какую-либо библиотеку, вы можете использовать нативную версию Dimensions of React.

import {DImensions} from react native;
const deviceWidth = Dimensions.get("window").width;
const deviceHeight = Dimensions.get("window").height;

и после этого используйте высоту как

height:0.156*deviceHeight 
width:0.55*deviceWidth

надеюсь, это поможет