React Native笔记四：踩坑记录

问题一 解决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);
  }
}