3.4.4 适配 iPhoneX 机型

iPhoneX 也是一个比较特殊的机型，当前程序在 iPhoneX 显示如图3-9所示。
图3-9 在 iPhoneX 上运行结果

由于 iPhoneX 顶部有刘海，四角是弧形的，底部有横线，所以顶部和底部都需要额外增加padding。修改 theme.js，代码如下：

import {Dimensions, Platform} from 'react-native';
export default module = {
    screenWidth: Dimensions.get('window').width,
    screenHeight: Dimensions.get('window').height,
    btnActiveOpacity: 0.5,
    actionBar: {
        height: 44,//Platform.OS === 'android' ? 56 : 44 //根据不通平台高度不一致
        backgroundColor: '#fff'
    },
    barContentPad: (Platform.OS === 'android' ? 0 : (isIphoneX() ? 42 : 20)),
    bottomPadding: isIphoneX() ? 18 : 0,
    // 常用颜色
    primaryColor: '#EE0000',
    lightGray: '#f5f5f5',
    darkGray: '#e5e5e5',
    lightBlack: '#333333'
};


export function isIphoneX() {
    let dimension = Dimensions.get('window');
    return (
        Platform.OS === 'ios' &&
        !Platform.isPad &&
        !Platform.isTVOS &&
        (dimension.height === 812 || dimension.width === 812)
    );
}

isIphoneX() 用来判断是否是 iPhoneX 机型，iOS 机型中只有 iPhoneX 的高度是 812 个单位（iPhoneX 分辨率为 2436*1125，RN一个单位在iPhoneX 上转换为3像素），无论横屏或者竖屏，宽和高总有一个是 812，barContentPad 用来处理顶部 padding ，当手机为 iPhoneX 时高度为42，bottomPadding 以后用来处理底部 padding ，iPhoneX 为 18 。运行结果如图3-10所示。
图3-10 运行结果

除了这些，为了方便适配 iPhoneX ，RN 提供了 SafeAreaView ，文档地址：http://facebook.github.io/react-native/docs/safeareaview.html 。
同时 react-navigation 也提供了名字一样的组件，左右也是一样，适用于顶部没有 Header 和 底部标签栏的界面 （这些界面 react-navigation 已经帮我们适配好了）。这个组件作为页面的最外层组件，参考代码：

import { SafeAreaView } from 'react-navigation';

class App extends Component {
  render() {
    return (
      <SafeAreaView style={styles.container}>
        <Text style={styles.paragraph}>
          This is top text.
        </Text>
        <Text style={styles.paragraph}>
          This is bottom text.
        </Text>
      </SafeAreaView>
    );
  }
}

查看代码

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