css - 如何在 React Native 中的 View 周围环绕文本？

Question

我想创建一个组件，该组件将在右上 Angular 显示一个名为 label 的 View ，并在其周围显示一些文本，类似于您在 float: right 时在 Web 布局上看到的内容。 <div>使用 CSS。标签和文本都可能有不同的长度。我一直在尝试使第 2 行开始的文本在标签下方环绕并展开，但没有成功。
到目前为止，这是我的代码:

<View style={{flexDirection: 'row', borderWidth: 1}}>
  <Text
    numberOfLines={3}
    style={{flex: 1}}
  >
    lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor
  </Text>
  <View>
    <Text style={{backgroundColor: 'wheat'}}>
      label 1234
    </Text>
  </View>
</View>

以及由此产生的渲染:

这是我想获得的:

Answer 1

最简单但有点“hacky”的方法是使用 float: right; ，正如您已经尝试过的那样。为此，必须在 float View 之后的外部 View 和文本组件上将 flex 样式设置为“初始”。此外，这仅在 float 元素首先出现时才有效。

<View style={{display: 'initial', borderWidth: 1}}>
    <View style={{float: 'right'}}>
        <Text style={{backgroundColor: 'wheat'}}>
            label 1234
        </Text>
    </View>
    <Text
        style={{display: 'initial'}}
        numberOfLines={3}
    >
        lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor ydrgsr serg er
    </Text>
</View>

现场示例: https://snack.expo.io/iuNiJSaYW