ReactNative 中的 Text 组件的文字在部分机型中默认没有颜色导致不能正确显示的问题

1.背景

问题背景：

• React Native 版本：0.59.10
• 问题机型：RedMi 11 pro

问题描述：

• 多处文字不能正确显示问题。排查发现，文字不能正常显示的地方的使用的 Text 组件都没有设置文字颜色
• 一处背景色与其他机型有出入，该颜色是用十六进制表示
• 以上两个问题在其他机型中皆显示正常

2.解决思路

Text 颜色问题

对于第一个问题，经排查渲染的 DOM 发现，渲染出的该节点的颜色（color）属性没有值，判断是该机型的默认色是透明的，导致不能显示。第一反应就是下面两种：

• 包装原生 Text ，设置默认颜色，形成一个新的组件，然后引用这个组件
• 写一个公共样式，在没有设置文字颜色的地方引用

由于地方较多，比较倾向于能够统一解决的办法，上面这两种办法还是无法避免挨个修改有问题的地方，还有一种办法，覆盖Text 组件的 render 方法：

import { Text,Platform } from 'react-native'

const setCustomText = () =>{
  const TextRender = Text.render
  let customStyle = { color：'black'}
  
  if(Platform.OS === "android"){
    // 可以解决一些android 的特定问题 
  }
  TextRender = function render(props) {
    const oldProps = props
    props = {...props,style:[customStyle,props.style]}
    try{
      return TextRender.apply(this,arguments)
    }finally{
      props = oldProps
    }
  }
}

十六进制颜色问题

对于第二个问题，找到解决方案是把十六进制表示（#6位）的颜色换成 rgb 表示。但是后面因为第一个问题修复后，能够清楚显示文字颜色，客户没有再反馈，所以没有验证。

**补充：**使用 #8 位表示的颜色（后两位表示透明度），在部分机型中也很容易出现问题，也可以替换成 rbg 或者 rgba 的形式解决。