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

转载http://blog.csdn.net/u011272795/article/details/78592605