React Native 开发豆瓣评分（五）屏幕适配方案

前言

React Native 是以实际像素 dp 为单位的，这导致在不同分辨率的屏幕会有不一样的显示情况。

在原生 Android 中，可以根据不同的分辨率添加不同的样式目录，以解决不同分辨率的问题。

在 web 中常见的屏幕适配方式是使用 rem、vw作为基本单位。

在微信小程序中，使用 rpx 作为屏幕适配单位，结合 px（实际像素）进行页面开发，一个屏幕的宽分为 750 份，每一份的长度则为 1rpx。

我们可以根据微信小程序的适配方案进行 App 的屏幕适配。

React Native 屏幕适配

在 utils 目录创建 device.js

import { Dimensions, PixelRatio, StatusBar} from 'react-native';

export const deviceWidth = Dimensions.get('window').width;      //设备的宽度
export const deviceHeight = Dimensions.get('window').height;    //设备的高度
export const statusHeight = StatusBar.currentHeight; // 状态栏的高度，如果要自定义头部的话会用到

export function px(size) {
    return deviceWidth / 750 * size
}

使用

import { px } from '../utils/device';

const styles = StyleSheet.create({
    test: {
        width: px(750),
        height: px(120),
        paddingLeft: px(30),
        paddingRight: px(30),
        borderBottomWidth: 1
    }
});