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版本的話, 可以用我的方法先進行適配.