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

Question

我有一个多行 React-Native Text 组件，其宽度应自动调整为最长文本行的宽度。这适用于 iOS，但不适用于 Android，我不知道为什么。

请参阅此博览会小吃进行演示。在 iOS 上它看起来像这样：

在 Android 上它看起来像这样：

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

标签： androidreact-nativeflexboxreact-native-androidreact-native-flexbox

Answer 1

我搜索了相同的内容，但没有找到任何东西。我尝试了一些“弹性”解决方案，但没有奏效。最后，我编写了“react”解决方案并且它可以工作（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>