react native 项目安卓bug小结

1. 这个人民币符号￥在华为手机上容易显示的少一横，用这个¥就没问题，最好写成固定变量封装在某文件中，作为变量来引用。

2. 在Android上指定Roboto字库，在OPPO、一加机型上字符被截断。对应issue跳转，

所以需要对Text标签进行处理一下。内置includeFontPadding属性，去掉Text在Android平台上多余的留白；

import React, {Component} from 'react';
import {Platform, StyleSheet, Text} from 'react-native';

const defaultFontFamily = {
    ...Platform.select({
        android: {fontFamily: 'Roboto'}
    })
};

export default class ZTText extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        let myStyle = {includeFontPadding: false}
        if (this.props.style) {
            let tempStyle = this.props.style;
            if (tempStyle.constructor == Number) {// 处理StyleSheet的样式
                tempStyle = StyleSheet.flatten(tempStyle);
            }

            if (tempStyle.constructor == Array) {
                tempStyle.forEach(styleInfo => {
                    let tempStyleInfo = styleInfo;
                    if (styleInfo.constructor == Number) {// 处理StyleSheet的样式
                        tempStyleInfo = StyleSheet.flatten(tempStyleInfo);
                    }
                    myStyle = {...myStyle, ...tempStyleInfo};
                });
            } else {
                myStyle = {...myStyle, ...tempStyle};
            }
        }

        let mergeStyle = {...defaultFontFamily, ...myStyle};
        let myProps = {...this.props, style: mergeStyle};

        return (< Text {...myProps}/>);
    }
}

3. 华为P30,P40以及一加手机，bug描述：A页面跳到B页面，B页面某块内容会闪烁不停，或者被白色的块覆盖住，滑动或点击可能就没白色块了。如果是C页面跳到B页面，可能就一切正常。

这个bug碰见好几次了，令人头疼不已。解释下原因吧：A页面有圆角的ui，所以使用了borderRadius配合overflow:'hidden'。这两个属性正常情况没问题，如果内容真的超过了外面包裹的组件，才会出发layout的overflow机制，然后B页面也有圆角效果，所以A页面圆角区域真正触发了overflow:hidden，跳转到B页面后就会闪烁。具体原因难解释。

解决方法：把overflow:hidden注释掉你就会发现不会闪烁了，但是这样就没圆角效果了，ued可能不同意，所以最终方案就是把圆角用两个图片来做，通过定位来盖上去。