React Native適配iphonex的方案
阿新 • • 發佈:2018-12-27
隨著iPhoneX的誕生,UI上也發生了一系列變化。
1、iOS11前導航欄的高度是64,其中狀態列(StatusBar)的高度為20。iPhoneX的狀態列(StatusBar)高度變為了44(感測器區域高度)。
2、iPhoneX的底部增加了虛擬Home區,由於安全區域的原因預設TabBar的高度由49變為83,增高了34(Home區高度),所以自定義的底部TabBar也需要需改其適配方案。
為了適配iPhone X,前輩們提供了一些解決方案:
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
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
使用方式:
import { ifIphoneX } from 'react-native-iphone-x-helper'
style:{
height: 60,
backgroundColor: 'transparent',
...ifIphoneX({
paddingTop: 50
}, {
paddingTop: 20
})
},
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
import { isIphoneX } from 'react-native-iphone-x-helper'
if (isIphoneX()) {
// do this...
} else {
// do that...
}
- 1
- 2
- 3
- 4
- 5
- 6
2、safe-area-view安全區域
寧波最好的整形醫院http://www.lyxcl.org/
寧波好的整形醫院http://www.lyxcl.org/
安全區域示意圖:
<SafeAreaView>
<View>
<Text>test</Text>
</View>
</SafeAreaView>
- 1
- 2
- 3
- 4
- 5