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