问题一 解决React Native中1px问题
const styles = StyleSheet.create({
inputBox: {
borderWidth: StyleSheet.hairlineWidth
}
})
但是在IOS和安卓存在border有显示问题，border可能会被算入高度当中，在列表循环的情况下较为明显。显示分割线可以采用独立的view标签代替。
const styles = StyleSheet.create({
line: {
height: StyleSheet.hairlineWidth,
backgroundColor: '#0366d6'
}
})
问题二 解决刘海屏（异形屏）问题
- 通用方法：使用react-navigation设置header
- 针对iphonex方法：SafeAreaView组件针对ios刘海优化
- 针对安卓异形屏方法：根据顶部statusBar.currentHeight位移
- 专门判断机型，对页面级别组件进行处理
const styles = StyleSheet.create({
container: {
...Platform.select({
android: {
paddingTop: StatusBar.currentHeight,
}
})
},
});
问题三 OPPO机型出现的字体问题
在OPPO老机型会出现默认字体溢出（Text 组件显示不全）的样式问题，当设置了 fontWeight 时某些安卓机出现这种情况，其中一种方案是给某个Text设置字体fontFamily: 'System'，但是这种方案太繁琐，而且未免会出现遗漏的情况，直接造成生产问题。
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],
});
};
用一个公共方法，将默认的Text.render重写，为安卓平台设置默认字体。
问题四 StatusBar问题
IOS客户端同事如果设置了app的info.plist，RN端将失去StatusBar的控制。只能对安卓的StatusBar进行设置。
而安卓的低版本的StatusBar则存在另一个问题，没法设置白底黑字，只能是指黑底白字，需要做版本兼容处理。
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);
}
}
