React Native中如何实现文字环绕View组件的布局？

你当前用flexDirection: row的方式其实是把文本和标签强制并排布局，这就导致文本只能被限制在标签左侧，没法像Web里用float:right那样自然环绕到标签下方——毕竟React Native本身没有CSS的float属性，得换个思路来实现。

这里给你两个方案，从简单适配到动态兼容不同长度的标签：

固定宽度标签的简易实现 #

如果标签的宽度大致固定，直接用绝对定位把标签放到右上角，同时给父容器设置右侧内边距，让第一行文本避开标签，后续文本就能自动绕到标签下方了：

<View style={{position: 'relative', borderWidth: 1, paddingRight: 80}}>
  <Text numberOfLines={3}>
    lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor
  </Text>
  <View style={{position: 'absolute', top: 0, right: 0, backgroundColor: 'wheat'}}>
    <Text>label 1234</Text>
  </View>
</View>

动态适配标签宽度的方案 #

如果标签长度不固定，咱们可以通过onLayout事件获取标签的实际宽度，再动态设置父容器的右侧内边距，这样不管标签多长都能完美适配：

import { useState } from 'react';
import { View, Text } from 'react-native';

export default function WrappedTextComponent() {
  const [labelWidth, setLabelWidth] = useState(0);

  // 获取标签的实际渲染宽度
  const handleLabelLayout = (event) => {
    const { width } = event.nativeEvent.layout;
    setLabelWidth(width);
  };

  return (
    <View style={{
      position: 'relative', 
      borderWidth: 1, 
      paddingRight: labelWidth + 8 // 加8px边距让文本和标签之间更美观
    }}>
      <Text numberOfLines={3}>
        lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor
      </Text>
      <View 
        style={{position: 'absolute', top: 0, right: 0, backgroundColor: 'wheat'}}
        onLayout={handleLabelLayout}
      >
        <Text>label 1234</Text>
      </View>
    </View>
  );
}

这个思路的核心是：用绝对定位让标签脱离正常布局流，父容器的右侧内边距确保第一行文本不与标签重叠，而换行后的文本因为没有被布局限制，会自动填充到标签下方的空间，完全模拟出CSS float:right的文字环绕效果。

内容的提问来源于stack exchange，提问作者apgsn