多行React-Native Text组件的宽度不会调整为Android上最长的文本行的长度

问题描述

我有一个多行React-Native Text组件，其宽度应自动调整为最长的文本行的宽度。这可以在iOS上运行，但不能在Android上运行，我不确定为什么。

请参阅this expo snack进行演示。 在iOS上看起来像这样：

在Android上看起来像这样：

上面的演示只是完整应用程序的摘要。我需要保留sf，因为在完整应用中，我需要在此文本框的右侧显示其他项。

解决方法

尝试使用带换行符的字符串变量代替useState：

const TextInANest = () => {
  var bodyText = "This is not really a bird nest. Nope. Indubitably.\n Antagonistic."
   // const bodyText = useState("This is not really a bird nest. Nope. Indubitably. Antagonistic.");

这样，您将在Android和iOS上获得相同的结果。它更像是一种解决方法，而不是解决方案，但仍希望它会有所帮助。

,

我搜索了相同的内容，但没有找到任何内容。我尝试了一些“灵活”的解决方案，但没有奏效。最后，我编写了“反应”解决方案并且它有效（TypeScript）：

const [maxLineWidth,setMaxLineWidth] = useState<number>()
const onTextLayout = useCallback((event: NativeSyntheticEvent<TextLayoutEventData>) => {
    const nextMaxLineWidth = event.nativeEvent.lines.reduce((result,line) => Math.max(result,line.width),0)
    setMaxLineWidth(Math.ceil(nextMaxLineWidth))
},[])
// ...
<Text
    style={{ width: maxLineWidth }}
    onTextLayout={onTextLayout}
>
    Very very long text!!!
</Text>