Отзывчивый в React Native

Question

Например, у меня есть представление со стилями: ширина: 100, высота: 100 для экрана с разрешением ~ 160 точек на дюйм. Но если приложение построено на устройстве с разрешением около 320 точек на дюйм, вид на экране будет слишком маленьким. есть решение для этого? Как сделать так, чтобы стили, которые приложение меняло автоматически, зависели от размера устройства? введите описание изображения здесь

Answer 1

используйте react-native-responsive-screen - отличный пакет для создания адаптивного макета https://www.npmjs.com/package/react-native-responsive-screen

или вы можете просто вычислить

import { PixelRatio } from 'react-native';
PixelRatio.roundToNearestPixel()

https://reactnative.dev/docs/pixelratio.html

import { Dimensions, PixelRatio } from 'react-native';
let Width = Dimensions.get('window').width;
let Height = Dimensions.get('window').height;

const wp = widthPercent => {
  const elemWidth = typeof widthPercent === "number" ? widthPercent : parseFloat(widthPercent);
  return PixelRatio.roundToNearestPixel(screenWidth * elemWidth / 100);
};

const hp = heightPercent => {
  const elemHeight = typeof heightPercent === "number" ? heightPercent : parseFloat(heightPercent);

  return PixelRatio.roundToNearestPixel(screenHeight * elemHeight / 100);
};

и используйте как

<View style={{height: hp(10), width: wp(20)}} >
  <Text style={{fontSize: hp(3.4)}} />
</View>

hp процент высоты

wp процент ширины