React Native适配iphonex的方案

随着iPhoneX的诞生，UI上也发生了一系列变化。

1、iOS11前导航栏的高度是64，其中状态栏(StatusBar)的高度为20。iPhoneX的状态栏(StatusBar)高度变为了44(传感器区域高度)。

2、iPhoneX的底部增加了虚拟Home区，由于安全区域的原因默认TabBar的高度由49变为83，增高了34(Home区高度)，所以自定义的底部TabBar也需要需改其适配方案。

为了适配iPhone X，前辈们提供了一些解决方案：

1、iphone-x-helper
项目地址：https://github.com/ptelad/react-native-iphone-x-helper
主要代码如下：

import { Dimensions,Platform } from 'react-native';


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

export function ifIphoneX(iphoneXStyle,regularStyle) {
    if (isIphoneX()) {
        return iphoneXStyle;
    } else {
        return regularStyle
    }
}

使用方式：

import { ifIphoneX } from 'react-native-iphone-x-helper'
 style:{
        height: 60,backgroundColor: 'transparent',...ifIphoneX({
            paddingTop: 50
        },{
            paddingTop: 20
        })
    },

import { isIphoneX } from 'react-native-iphone-x-helper'
if (isIphoneX()) {
    // do this...
} else {
    // do that...
}

2、safe-area-view安全区域
安全区域示意图：

项目地址： https://github.com/react-community/react-native-safe-area-view
使用方式：

<SafeAreaView>
  <View>
    <Text>test</Text>
  </View>
</SafeAreaView>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!