在红米10上,Text 包裹的文字,和其他机型不一样,会出现异常换行,有时候即使宽度还有富余,但也会换行。

调试之后发现很莫名其妙,明明还有空间但换行了。查资料后发现也有人遇到同样的问题。
- Android 上存在吞字现象,现象是部分机型上最后一个字符不显示,原因不明。目前的折衷方案是文字的最后一行多加一个空格 or 零宽字符,或者直接强制修改字体 family
我采用了在文字后面追加零宽字符的方式解决。添加空格也可以,但空格有长度。
const FormatText: React.FC<IProps> = function ({
children,
size = 'normal',
color = 'default',
style,
spacer,
...props
}) {
const spacerText = Platform.OS === 'android' ? '\u200B\u200B' : '';
return (
<Text
style={[styles.row, styles?.[size], styles?.[color], style]}
{...props}>
{children}
{spacer && spacerText}
</Text>
);
};可以参考下这篇文章:https://supercodepower.com/react-native-tweet#2text
但零宽字符也不是万能的,不同文本可能需要不同数量的零宽字符,目前只能靠试。