React Native小米手机UI适配问题解决

小米手机RN UI问题总结起来一句话：界面文本展示不全 (不是因为内容不全，就纯UI展示不全！！！)。看下面图：

解决方法：

1.文本内容被截断（如上图中1、3情况）

解决：给文本设置一个宽带 或文本后面加个空格

 // 方式一：设置文本宽度，如屏幕宽度-padding
const styles = StyleSheet.create({
  textGrey12: {
    width: SCREEN_WIDTH - 32, 
  }
}
                                 
// 方式二：设置文本内容后面加个空格                                
<Text style={styles.textRed27}>￥3330 </Text>  

2.文本内容只展示一半（如上图中2情况）

解决：给文本设置设置行高

// 设置文本每行的行高（具体值可根据UI稿设置）
const styles = StyleSheet.create({
  textGrey14: {
      lineHeight: 22
  }
}

3.一箭双雕的办法

解决：给展示不全的文本，设置一个fontFamily属性，值为空''，展示不全和不容截断就都能解决

const styles = StyleSheet.create({
  textGrey: {
   fontFamily: ''  //设置lucida grande字体Android也能解决问题，但iOS会crash
  }
}

附lucida grande字体和PPT常用字体对比图：