小米手机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常用字体对比图: