React Native嵌入内联组件时文本flex-wrap换行失效问题

你当前使用的flexDirection: "row" + flexWrap: "wrap"布局逻辑，会将容器下每个直接子元素视为不可拆分的独立弹性项：当单行剩余空间放不下某个子元素时，会直接将整个子元素挪到下一行，不会拆分元素内部的文本实现逐字自然折行。另外你给Text组件设置flexWrap: "wrap"是无效属性，Text本身不是弹性容器，该样式不会生效。

React Native 要实现文本块内联嵌入可交互组件、自然折行的效果，不能使用外层View套row弹性布局的写法，必须将所有正文、内联标签全部放在同一个根Text组件内部：Text组件支持嵌套其他Text、View组件，嵌套内容会和正文一起遵循文本排版规则，在空间不足时逐字符自然折行，给嵌套的Text绑定onPress事件即可实现可点击标签的需求。

修正后的可运行代码如下：

return (
  <View style={styles.container}>
    {/* 所有内联内容统一放在同一个根Text组件内 */}
    <Text style={styles.nonAnchorText}>
      {textParts.map((part, i) => {
        if (i % 2 === 0) {
          return "Lorem ipsum dolor sit amet ";
        } else {
          return (
            <Text
              key={i}
              style={styles.anchorText}
              onPress={() => {
                // 替换为标签点击后的实际业务逻辑
                console.log("标签被点击");
              }}
            >
              TAG
            </Text>
          );
        }
      })}
    </Text>
  </View>
);

const styles = StyleSheet.create({
  container: {
    backgroundColor: "grey",
    // 移除不必要的flexDirection、flexWrap配置
  },
  nonAnchorText: {
    backgroundColor: "beige",
    fontSize: 17,
    // 移除无效的flexWrap配置
  },
  anchorText: {
    backgroundColor: "pink",
    fontSize: 17,
    marginHorizontal: 4, // 可选：给标签添加左右边距，和正文拉开距离
  },
});

• 上述写法下，普通文本和可点击标签会和普通正文段落完全一致，按字符自然拆分折行，不会出现整块内容跳行的问题
• 如果需要嵌入结构更复杂的自定义标签（比如带图标、圆角背景的标签），React Native 0.63及以上版本支持在Text组件内嵌套View，直接将自定义标签组件写在根Text内部即可，同样支持自然折行
• 嵌套的可点击组件不会影响其他文本的响应，点击事件只会在对应标签区域触发

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