ReactNative 适配iPhoneX

iPhoneX 出了之后 , 它的小刘海和底部的home条成为了移动端程序员需要适配的地方, 今天用ReactNative 初步在项目上尝试了适配.
先看一下iPhonex7和X上同样代码的效果图:

这里写图片描述

UI适配

导航栏适配

iPhoneX由于多了大圆角、传感器(齐刘海)以及底部访问主屏幕的指示遮挡，所以需要注意原有这部分内容的设计。
iOS11前导航栏的高度是64，其中statusBar的高度为20，而iPhoneX的statusBar高度变为了44，如果是自定义的NaviBar，这部分需要做相应的适配。

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

可能有部分APP使用了RN来实现页面，不要忘了在RN中修改相应NaviBar/TabBar的高度。

这里写图片描述

以上两张图可以看出 iPhoneX 做的改变了, 下面开始我们的适配工作.

首先要判断是否为iPhoneX手机:

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

export let screenW = Dimensions.get('window').width;
export let screenH = Dimensions.get('window').height;
// iPhoneX
const X_WIDTH = 375;
const X_HEIGHT = 812;

/**
 * 判断是否为iphoneX
 * @returns {boolean}
 */
export function isIphoneX() {
    return (
        Platform.OS === 'ios' &&
        ((screenH === X_HEIGHT && screenW === X_WIDTH) ||
            (screenH === X_WIDTH && screenW === X_HEIGHT))
    )
}

/**
 * 根据是否是iPhoneX返回不同的样式
 * @param iphoneXStyle
 * @param iosStyle
 * @param androidStyle
 * @returns {*}
 */

export function ifIphoneX(iphoneXStyle, iosStyle, androidStyle) {
    if (isIphoneX()) {
        return iphoneXStyle;
    } else if (Platform.OS === 'ios') {
        return iosStyle
    } else {
        if (androidStyle) return androidStyle;
        return iosStyle
    }
}

上面代码第一个方法是根据屏幕的尺寸(包括横屏和竖屏) 来判断是否为iponeX.如果是则返回true.

第二个方法是传入两个style , 根据第一个方法的返回结果来使用不同的style以对屏幕进行匹配.

简单看一下应用:

 <View style={{
                ...ScreenUtils.ifIphoneX({
                    marginTop: -10
                }, {
                    marginTop: -22
                }),
            }}>

    tabBarStyle: {
        backgroundColor: '#FFFFFF',
        ...ScreenUtil.ifIphoneX(
            {
                bottom: ScreenUtil.scaleSize(34)
            },
            {
                bottom: 0,
                opacity: 0.8
            }),
        //bottom: ScreenUtil.isIphoneX() ? ScreenUtil.scaleSize(34) : 0
    },

以上就是我上面图里的样式了

ScreenUtil是我的屏幕适配工具类
点击直达

React Native 在前两天发布了0.50.1版本。幸运的是，在该版本中，添加了一个SafeAreaView的Component，来完美支持iPhoneX的适配。并且React-Navigation导航控件库也在^1.0.0-beta.16版本添加对iPhoneX的支持。小伙伴们终于可以轻松的燥起来了。此时也会有一个新的问题，不能升级RN版本的童靴怎么办呢？也不用急，React社区react-community开源了一个JsOnly版本的SafeAreaView，github地址.
使得在低版本上同样可以解决iPhoneX的适配问题，使用方式也很简单：

<SafeAreaView>  
  <View>  
    <Text>Look, I'm safe!</Text>  
  </View>  
</SafeAreaView>

只要将SafeAreaView作为最外层控件即可。
但是在我实际使用的时候出现的问题还无法解决,GitHub上的解决方法对我无效
所以暂时, 如果你不想升级reactnative版本的话, 可以用我的方法先进行适配.

最后附上工具类的github地址

ReactNative 适配iPhoneX

猜你喜欢