問題一 解決React Native中1px問題
const styles = StyleSheet.create({
inputBox: {
borderWidth: StyleSheet.hairlineWidth
}
})
但是在IOS和安卓存在border有顯示問題闹瞧，border可能會(huì)被算入高度當(dāng)中盒让，在列表循環(huán)的情況下較為明顯。顯示分割線可以采用獨(dú)立的view標(biāo)簽代替。
const styles = StyleSheet.create({
line: {
height: StyleSheet.hairlineWidth,
backgroundColor: '#0366d6'
}
})
問題二 解決劉海屏（異形屏）問題
- 通用方法：使用react-navigation設(shè)置header
- 針對(duì)iphonex方法：SafeAreaView組件針對(duì)ios劉海優(yōu)化
- 針對(duì)安卓異形屏方法：根據(jù)頂部statusBar.currentHeight位移
- 專門判斷機(jī)型澈圈，對(duì)頁面級(jí)別組件進(jìn)行處理
const styles = StyleSheet.create({
container: {
...Platform.select({
android: {
paddingTop: StatusBar.currentHeight,
}
})
},
});
問題三 OPPO機(jī)型出現(xiàn)的字體問題
在OPPO老機(jī)型會(huì)出現(xiàn)默認(rèn)字體溢出（Text 組件顯示不全）的樣式問題，當(dāng)設(shè)置了 fontWeight 時(shí)某些安卓機(jī)出現(xiàn)這種情況帆啃，其中一種方案是給某個(gè)Text設(shè)置字體fontFamily: 'System'瞬女，但是這種方案太繁瑣，而且未免會(huì)出現(xiàn)遺漏的情況努潘，直接造成生產(chǎn)問題诽偷。
import React from 'react';
import { Platform, Text } from 'react-native';
const defaultFontFamily = {
...Platform.select({
android: { fontFamily: 'Roboto' },
}),
};
const oldRender = Text.render;
Text.render = function(...args) {
const origin = oldRender.call(this, ...args);
return React.cloneElement(origin, {
style: [defaultFontFamily, origin.props.style],
});
};
用一個(gè)公共方法，將默認(rèn)的Text.render重寫疯坤，為安卓平臺(tái)設(shè)置默認(rèn)字體报慕。
問題四 StatusBar問題
IOS客戶端同事如果設(shè)置了app的info.plist，RN端將失去StatusBar的控制压怠。只能對(duì)安卓的StatusBar進(jìn)行設(shè)置眠冈。
而安卓的低版本的StatusBar則存在另一個(gè)問題，沒法設(shè)置白底黑字菌瘫，只能是指黑底白字蜗顽，需要做版本兼容處理。
import { Platform } from 'react-native';
export default function setStatusBar() {
if (Platform.OS === 'android') {
const { StatusBar } = require('react-native');
const bgColor = Platform.Version > 22 ? 'white' : 'black';
const fontColor = Platform.Version > 22 ? 'dark-content' : 'light-content';
StatusBar.setBackgroundColor(bgColor);
StatusBar.setBarStyle(fontColor);
}
}
