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);
  }
}

推荐阅读更多精彩内容