一.获取屏幕密度进行判断选择styles样式
import { Dimensions, PixelRatio } from 'react-native';
const {height, width} = Dimensions.get('window'); // 获取窗口的宽、高度,以 dp 为单位。
PixelRatio.get(); // 获取设备的像素密度
PixelRatio.getFontScale(); // 获取设备的文字缩放比率
Platform.OS == "ios"//"android"
对应的判断条件为:
PixelRatio.get() === 1
mdpi Android devices
PixelRatio.get() === 1.5
hdpi Android devices
PixelRatio.get() === 2
iPhone 4, 4S
iPhone 5, 5c, 5s
iPhone 6, 7, 8
xhdpi Android devices
PixelRatio.get() === 3
iPhone 6 Plus, 7 Plus, 8 Plus
iPhone X
Pixel, Pixel 2
xxhdpi Android devices
PixelRatio.get() === 3.5
Nexus 6
Pixel XL, Pixel 2 XL
xxxhdpi Android devices
二.react-native flexbox布局
1.按比例设计UI