ReactNative 刘海屏适配iPhoneX

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u011272795/article/details/78592605

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地址

没有更多推荐了,返回首页

私密
私密原因:
请选择设置私密原因
  • 广告
  • 抄袭
  • 版权
  • 政治
  • 色情
  • 无意义
  • 其他
其他原因:
120
出错啦
系统繁忙,请稍后再试