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相关推荐

Android 刘海屏适配
转载:原文链接一.简介随着 Apple 发布 iPhone X 之后,各大手机厂商也开始模仿这种刘海屏的设计,而且刘海屏手机的用户也是越来越大,前段时间将项目进行了所有主流厂商的刘海屏手机的适配, ...
Android 系统（70）---Android刘海屏适配方案
Android刘海屏适配方案什么是刘海屏随着iPhone X发布,国内一些厂商也推出了刘海屏手机,即将发布的Android p也提供了对刘海屏的支持.so,我们的app也要提前做好适配. 屏幕的正 ...
Android P(3)---Android P版本刘海屏适配指南
Android P版本刘海屏适配指南 Android P预览版增加了很多亮点新特性,其中最接地气.最直观的改变当属适配了类似于华为P20的顶部凹槽屏幕设计这一项,俗称刘海屏. 在开发者模式中,Andr ...
Android刘海屏适配全方案（华为、小米、Vivo、Oppo)
前言目前市面上的刘海屏和水滴屏手机越来越多了,颜值方面是因人而异,有的人觉得很好看,也有人觉得丑爆了,我个人觉得是还可以.但是作为移动开发者来说,这并不是一件好事,越来越多异形屏手机的出现意味着我们 ...
详解Android刘海屏适配
Apple一直在引领设计的潮流,自从 iPhone X 发布之后,"刘海屏" 就一直存在争议,本以为是一个美丽的错误(Bug),却早就了一时间"刘海屏"的模仿潮 ...
Android 刘海屏适配
Android 刘海屏适配主要有三种方案第一,LAYOUT_IN_DISPLAY_CUTOUT_MODE_DEFAULT 模式在该模式下,如果当前应用没有设置页面全屏显示,则显示逻辑,与正常情况 ...
Android刘海屏适配
Android刘海屏适配全屏模式下刘海屏黑边(内容区域下挫)问题,支持国国内华为,小米,OPPO/VIVIO 非原生9.0系统的刘海屏刘海屏是Android9.0之后才支持的详见源码 andr ...
Android 刘海屏适配全攻略
这里主要是介绍一下Android P中刘海屏的适配以及Android P之前的适配.为什么要分开呢?因为Android P之前官方还没提供API来进行适配,都是由各家厂商来提供适配方案的. 2.And ...
简洁明了的刘海屏适配方案
网上关于刘海屏适配的文章不少,可讲清楚的却没几篇,大多是拷贝文档.长篇大论,甚至热情的贴图告诉你什么是刘海屏,到最后你仍不确定到底是怎样的一个适配方案,才能让你的 app 真正的适配所有的刘海屏机型. ...

ReactNative 刘海屏适配iPhoneX

ReactNative 刘海屏适配iPhoneX相关推荐

最新文章

热门文章