React Native中多个Text列表项超出容器宽度时如何实现自动换行？

解决方法 #

你遇到的无法自动换行的核心原因是：使用了flexDirection: row的View组件包裹多个独立Text子组件，默认View不会自动换行子元素，且独立的Text组件作为View的子项时，无法联动实现文本跨行拆分。

推荐最优解法：用单个Text组件作为外层容器替换原来的View，React Native 中Text组件内部的子Text元素会自动按照文本规则排版，超出宽度时自动换行，同时能保留每个子Text的自定义样式。

核心代码修改 #

仅需要调整App组件的外层容器和对应样式即可：

const App = () => {
  return (
    {/* 把原来的View替换为Text，去掉多余的flexDirection配置 */}
    <Text style={styles.container}>
      {
        LabelTypes.map((item, index) => (
          <>
            { index > 0 && <Text> - </Text>}
            <Text style={[styles.label, styles[item.styleType] ]}>{item.label}</Text>
          </>
        ))
      }
    </Text>
  );
};

原有styles.container的样式可以完全保留，不需要额外新增配置。

如果需要保留外层View容器，也可以给外层View新增flexWrap: 'wrap'属性实现换行，不过该方案会将每个Text子项作为整体换行，不会对单个超长Text内部的文本做跨行拆分，适配性不如上述最优解法。

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