随着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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。