React Native如何实现多行文本完整环绕行内Image组件

React Native 原生的 <Text> 嵌套 <Image> 逻辑仅将图片识别为单行行内元素，仅会在图片所在的第一行预留占位宽度，后续行排版不会识别图片的高度占位，因此会出现文字覆盖图片的问题，这是RN底层文本渲染机制的固有限制，原生组件没有直接支持多行环绕的属性。

以下是三种可落地的实现方案：

方案1：WebView 内嵌HTML实现（开发成本最低） #

利用HTML原生的float属性天然支持文本环绕的特性，将图文内容拼接为标准HTML片段传入WebView即可实现效果，适合对交互要求不高的静态图文混排场景。

方案2：纯RN原生组件手动排版（无额外依赖） #

提前已知图片尺寸、文本行高的前提下，按以下逻辑实现：

• 图片使用绝对定位固定在容器左侧/右侧
• 计算图片高度对应多少行文本（图片高度 / 文本行高，向上取整得到行数N）
• 将文本拆分为前N行与剩余内容两部分，前N行文本设置对应方向的padding等于图片宽度+间距，剩余内容正常排版

代码示例：

import React from 'react';
import { Image, Text, View, StyleSheet } from 'react-native';

const IMG_WIDTH = 100;
const IMG_HEIGHT = 100;
const LINE_HEIGHT = 20;
// 计算图片占据行数
const IMG_LINES = Math.ceil(IMG_HEIGHT / LINE_HEIGHT);

export default function App() {
  const fullText = "This is long text it should wrap around the image. Lorem ipsum even more haha that's kind of cool. Is this working? It is but it's only keeping the first line of text and then the second line and on are on top of the image. 后续的文本会自动避开图片区域正常展示。"
  return (
    <View style={styles.container}>
      <Image
        source={{ uri: 'https://via.placeholder.com/100' }}
        style={styles.img}
      />
      <Text style={styles.text} numberOfLines={IMG_LINES}>
        {fullText}
      </Text>
      <Text style={styles.normalText}>
        {/* 可结合Text组件的onTextLayout回调动态获取前N行容纳的字符数，自动截取剩余文本 */}
        {fullText.slice(60)}
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 16,
  },
  img: {
    position: 'absolute',
    left: 16,
    top: 16,
    width: IMG_WIDTH,
    height: IMG_HEIGHT,
  },
  text: {
    lineHeight: LINE_HEIGHT,
    paddingLeft: IMG_WIDTH + 12, // 图片宽度+图文间距
    fontSize: 14,
  },
  normalText: {
    lineHeight: LINE_HEIGHT,
    fontSize: 14,
    marginTop: 8,
  }
})

如果需要动态适配不同文本长度，可以结合Text组件的onTextLayout回调获取每行文本的字符数，动态计算截断位置，不需要提前预设截取长度。

方案3：使用社区图文混排库 #

社区有多个成熟的第三方库封装了上述排版逻辑，无需手动计算截断位置，支持图片任意位置对齐、边距自定义、多图片混排等能力，适合复杂图文场景使用。

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