如何使<text>标签的行为类似于react-native中的HTML内联元素

Question

我有一个简单的UI结构：

<View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>

  <Text>A simple fee equal to</Text>
  <View style={{ width: 80 }}>
    <TextInput style={{ borderWidth: 1, borderColor: 'black' }} />
  </View>
  <Text>of any settlement or judgment</Text>

</View>

在小屏幕上，它将显示类似这样的内容

如上图所示，我希望文本of any settlement or judgment不会移到下一行。

我能想到的最接近的解决方案是将每个文本分成单独的Text元素。

<View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>

  <Text>A simple fee equal to</Text>
  <View style={{ width: 80 }}>
    <TextInput style={{ borderWidth: 1, borderColor: 'black' }} />
  </View>

  {'of any settlement or judgment'.split(' ').map((chunk, i) => (
    <Text key={i.toString()}>{chunk} </Text>
  )}

</View>

结果如下：

问题：是否有更好的方法来实现我想要的目标？还是这是解决问题的唯一方法？

Answer 1

您可以使用flexDirection：'row'样式属性将其写在视图中，也可以将其包装在另一个这样的Text中：

<Text>
 <Text>A simple fee equal to</Text>
  <View style={{ width: 80 }}>
    <TextInput style={{ borderWidth: 1, borderColor: 'black' }} />
  </View>
  <Text>Of any settlement or Judgement</Text>
</Text>