react native 在红米10上文字排版异常换行

在红米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

但零宽字符也不是万能的,不同文本可能需要不同数量的零宽字符,目前只能靠试。

Leave a Comment

邮箱地址不会被公开。 必填项已用*标注