如何在 React Native 中的视图周围环绕文本？答案

【问题标题】：How do I wrap text around a View in React Native?如何在 React Native 中的视图周围环绕文本？
【发布时间】：2021-02-21 06:53:22
【问题描述】：

我想创建一个组件，它将在右上角显示一个名为 label 的视图，并在其周围显示一些文本，类似于您在 Web 布局中获得的内容float: right <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>

以及生成的渲染：

这正是我想要获得的：

【问题讨论】：

在 RN 中开箱即用不支持环绕视图的环绕文本 ...
您能否展示一个image 所需输出的示例？从任何地方？？
@KartikeyVaish 我刚刚添加了一个使用 html/css 制作的示例。
请检查这可能对你有帮助snack.expo.io/ZHH7cvdVG
由于flexDirection: row 风格，我不确定您能否完成此操作。您可能想尝试使标签文本绝对定位。

标签： css react-native layout

【解决方案1】：

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

<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

【讨论】：

这仅适用于 RN Web，在 Android 和 iOS 上，样式没有浮动选项，因此会被忽略。