4.3 屏幕尺寸适配

修改 src/pages/MyPage.js

export default class MyPage extends Component<Props> {

    render() {
        return ( // 渲染布局
            <View style={styles.container}>
                <View style={{height:50, width:375,backgroundColor:'red'}}/>
            </View>
        );
    }
}

上面代码只是定义了一个 View 高是50，width 是 375 ，RN 尺寸的单位是 PT，375其实就是 iPhone6/7/8 的屏幕宽度（屏幕宽度是750像素，375 PT）。

但是这段代码在 iPhone6 和 部分 Android 机型显示就有问题，如图4-9所示。

图4-9 iPhone 和 Android 运行的差异

一般效果图 iPhone6/7/8 的尺寸，我们希望 375长度 在任何机型上都能恰好占横屏的全部，需要引入工具类 px2dp

修改代码，/src/utils/px2dp.js：

'use strict';
import {Dimensions} from 'react-native';

/**
 * 屏幕工具类
 * ui设计基准,iphone 6
 * width:750
 * height:1334
 */
export let screenW = Dimensions.get('window').width;
export let screenH = Dimensions.get('window').height;
const r2=2;
const w2 = 750/r2;
const h2 = 1334/r2;

export const DEFAULT_DENSITY=r2;

/**
 * 屏幕适配,缩放size
 * @param size
 * @returns {Number}
 * @constructor
 */
export default function px2dp(size) {
    let scaleWidth = screenW / w2;
    size = Math.round((size * scaleWidth + 0.5));
    return size/DEFAULT_DENSITY;
}

如果设计稿不是 iPhone6 的尺寸，则需要更改 r2，w2 和 h2 的值，r2 代表密度，iPhone6 上 1pt =2px。 w2 和 h2 分别用 iphone6 尺寸的宽度 750 像素和高度 1334 像素除以密度。

px2dp 方法接收效果图标注的像素，根据不同机型得到不同的尺寸。修改 MyPage.js ：

import px2dp from "../utils/px2dp";

type Props = {};
export default class MyPage extends Component<Props> {

    render() {
        return ( // 渲染布局
            <View style={styles.container}>
                <View style={{height: px2dp(100), width: px2dp(750), backgroundColor: 'red'}}/>
            </View>
        );
    }
}

Android 上的运行结果和 iOS 基本保持一致了， 为了更好适配不同手机，建议单位采用 px2dp 这种方式。

字体适配

无论 Android 和 iOS ，用户都是可以通过手机系统设置调整手机字体的大小，这点需要格外注意，因为如果用户设置字体过大或者过小，会影响 Text 等组件显示的大小。一般某些特殊界面不允许按照系统设置的字体缩放比显示，这时候需要设置 Text 组件 allowFontScaling 属性为 false。我们抽取出一个组件 TextFix ：

// /src/component/TextFix.js
import React from 'react';
import {Text} from 'react-native';


const TextFix=(props)=> {
    return (
        <Text {...props} allowFontScaling={false}>
            {props.children}
        </Text>
    );
};

export default TextFix;

查看代码

如果你已经从 GitHub 上克隆了这个程序的 Git 仓库，那么可以执行 git checkout 4b 签出程序的这个版本。