如下圖所示康震，iPhoneX由于多了大圓角烟号、傳感器(齊劉海)以及底部訪問(wèn)主屏幕的指示遮擋诗箍，所以需要注意原有這部分內(nèi)容的設(shè)計(jì)匿又。
iOS11前導(dǎo)航欄的高度是64，其中statusBar的高度為20塘秦，而iPhoneX的statusBar高度變?yōu)榱?4讼渊，如果是自定義的NaviBar，這部分需要做相應(yīng)的適配尊剔。
另外爪幻，iPhoneX的底部增加了虛擬Home區(qū)，由于安全區(qū)域的原因默認(rèn)tabBar的高度由49變?yōu)?3，增高了34挨稿，所以自定義的底部TabBar也需要需改其適配方案仇轻。

iPhoneX.png

對(duì)此，我自己封裝過(guò)一些方法來(lái)適配iPhone叶组，今天分享給大家

首先我們得判斷是否為iPhoneX拯田，最簡(jiǎn)單的就是根據(jù)屏幕大小判斷

//iPhoneX大小
const X_width = 375;
const X_height = 812;
const isIPhoneX = Platform.OS === 'ios' && ( (height === X_height && width ===X_width) || (height === X_width && width ===X_height) );

//這里如果isIPhoneX===1，則為iPhoneX,否則不是

其次我們封裝兩個(gè)函數(shù)分別處理頭部和底部的樣式

// iphoneX 頂部留白的兼容處理
export function isIPhoneXPaddTop(number) {
    number = isNaN(+number) ? 0 : +number;
    return number + (isIPhoneX ? 44 : 20)
}
//iPhoneX 底部高度兼容處理
export function isIPhoneXFooter(number){
    number = isNaN(+number) ? 0 : +number;
    return number + (isIPhoneX ? 34 : 0 )
}

這樣我們?cè)诜庋b頭部組件和底部bar組件的時(shí)候甩十，就可以使用這兩個(gè)函數(shù)

先展示一下我的項(xiàng)目結(jié)構(gòu)

項(xiàng)目結(jié)構(gòu).png

import React, { Component } from 'react';

import {
    StyleSheet,
    Text,
    View,
    Dimensions,
    TouchableOpacity
} from 'react-native';

//  isIPhoneXPaddTop函數(shù)引入
import { getPixel, isIPhoneXPaddTop } from "../../common/common"

//獲取當(dāng)前屏幕的大小
let {height,width} =  Dimensions.get('window');


class Header extends Component {
    render() {
        return (
            <View style={styles.header}>
                <View style={styles.headerCon}>
                    <TouchableOpacity
                        style={styles.HeaderBtn}><Text style={styles.return}>返回</Text>
                    </TouchableOpacity>
                    <View><Text style={styles.title}>標(biāo)題</Text></View>
                    <TouchableOpacity style={styles.HeaderBtn}>
                        <Text style={styles.share}>分享</Text>
                    </TouchableOpacity>
                </View>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    header: {
        width: width,
        backgroundColor: "#fff",
        //  iPhoneX頭部兼容處理
        paddingTop: isIPhoneXPaddTop(0),
        borderBottomWidth: StyleSheet.hairlineWidth,
        borderColor: "#E0E0E0",

        position: "absolute",
        top: 0,
    },
    headerCon: {
        height: getPixel(44),
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "space-between",

    },
    HeaderBtn: {
        width: getPixel(44),
        height: getPixel(44),
        justifyContent: "center",
        alignItems: "center",
    },
    return: {
        fontSize: getPixel(16),
        color: "#333",
    },
    share: {
        fontSize: getPixel(16),
        color: "#333",
    },
    title: {
        fontSize: getPixel(18),
        color: "#222",
    }
})


export default Header;

同理：底部的bar也是這樣處理船庇，我就展示關(guān)鍵代碼了

import { getPixel, isIPhoneXFooter } from "../../common/common";

.....

return  (
            <View style={styles.tabs}>
                <View style={styles.tabbarContainer}>
                  
                </View>
            </View>
        )

......

tabs: {
        flex:1,
        width:width,
        position: "absolute",
        bottom:0,
        paddingBottom: isIPhoneXFooter(0)
    },
    tabbarContainer:{
        height:getPixel(60),
        flexDirection: "row",
        alignItems:"center",
        justifyContent:"center",
        backgroundColor: "#FF9913",
    },

最后看一張圖片，對(duì)比下兼容處理之后的效果

適配iPhoneX.png

希望對(duì)大家有幫助哦侣监，一起加油??