每行文本的 React-native Text 自动宽度

Question

我正在尝试在视图中包含 2 个文本元素。我需要第一个元素的 numberOfLines 为 2，并且第二个元素能够放在第一行和第二行的第一个元素旁边，但是如果第一个元素占用其最多 2 行，那么第二个元素将移至第 3 行

例子

代码

// using nativewind similar to tailwindcss (does not impact issue)
<View className="flex-wrap flex flex-row mx-1">
    <Text className="text-white text-xs flex-nowrap bg-red-500" numberOfLines={ 2 } style={{ fontFamily: "Roboto-Medium" }}>
        { text }
    </Text>
    <TextGradient className="z-10 border-1 border-red-600" fontSize={ 12 } lineHeight={ 16 } fontFamily="Roboto-Medium" angle={ 45 } colors={ [ "#00F0FF", "#00A3FF" ] }>{ /* returns svg text */ }
        { otherText }
    </TextGradient>
</View>

我已经尝试了许多其他建议的答案，包括许多来自 react-native-auto-width-by-text-inside，但我从这里尝试的所有解决方案都只适用于单行文本并且不起作用对于多行。

我也尝试用

View

组件替换

Text

组件，但这导致第一个

Text

元素不能有一个集合

numberOfLines