React Native中FlatList动态列数实现：按文本长度适配每行项数

要实现不定长度文本项的自动换行排列，核心思路是先获取容器可用宽度，再计算每个文本的实际宽度，最后动态分组将能容纳的项放在同一行，具体步骤如下：

1. 获取容器的可用宽度 #

给外层容器绑定onLayout事件，拿到容器宽度后，扣除内边距、外边距等占用空间，得到真正可用于排列文本的宽度：

const [containerWidth, setContainerWidth] = useState(0);

const handleContainerLayout = (e) => {
  const { width } = e.nativeEvent.layout;
  // 假设容器有16px左右内边距，根据实际样式调整
  const availableWidth = width - 32;
  setContainerWidth(availableWidth);
};

// 外层容器
<View style={{ paddingHorizontal: 16 }} onLayout={handleContainerLayout}>
  {/* 动态生成的行 */}
</View>

2. 计算单个文本项的宽度 #

可以利用React Native提供的measure方法（兼容低版本），或RN 0.71+版本的useTextLayout钩子，获取每个文本渲染后的实际宽度：

方法一：使用measure（兼容低版本） #

const [textWidths, setTextWidths] = useState({});
const textRefs = useRef([]);

useEffect(() => {
  if (containerWidth === 0) return;
  // 遍历所有文本ref，测量宽度
  textRefs.current.forEach((ref, index) => {
    ref?.measure((x, y, width, height) => {
      setTextWidths(prev => ({ ...prev, [index]: width }));
    });
  });
}, [containerWidth]);

// 渲染文本项时绑定ref
{items.map((item, index) => (
  <Text 
    key={index} 
    ref={el => textRefs.current[index] = el}
    style={{ marginRight: 8 }} // 文本项间的间距，需计入宽度计算
  >
    {item}
  </Text>
))}

方法二：使用useTextLayout（RN 0.71+） #

const [textWidths, setTextWidths] = useState({});

const handleTextLayout = (index, e) => {
  const { width } = e.nativeEvent.lines[0];
  setTextWidths(prev => ({ ...prev, [index]: width }));
};

// 渲染文本项时绑定onLayout
{items.map((item, index) => (
  <Text 
    key={index} 
    onLayout={(e) => handleTextLayout(index, e)}
    style={{ marginRight: 8 }}
  >
    {item}
  </Text>
))}

3. 动态分组生成行 #

拿到容器可用宽度和所有文本项的宽度后，遍历文本项累加宽度，判断是否能放入当前行，超出则换行：

const [rows, setRows] = useState([]);

useEffect(() => {
  if (containerWidth === 0 || Object.keys(textWidths).length !== items.length) return;
  
  const tempRows = [];
  let currentRow = [];
  let currentWidth = 0;
  const gap = 8; // 文本项间的间距，和样式保持一致

  items.forEach((item, index) => {
    const itemWidth = textWidths[index];
    // 计算当前项加入后的总宽度：已有宽度 + 当前项宽度 + 间距（非第一个项）
    const totalWidth = currentRow.length 
      ? currentWidth + itemWidth + gap 
      : itemWidth;

    if (totalWidth <= containerWidth) {
      // 能放入当前行
      currentRow.push(item);
      currentWidth = totalWidth;
    } else {
      // 超出宽度，当前行存入，开始新行
      tempRows.push(currentRow);
      currentRow = [item];
      currentWidth = itemWidth;
    }
  });

  // 加入最后一行
  if (currentRow.length > 0) {
    tempRows.push(currentRow);
  }

  setRows(tempRows);
}, [containerWidth, textWidths, items]);

4. 渲染最终分组后的行 #

把分组好的rows渲染出来即可：

{rows.map((row, rowIndex) => (
  <View key={rowIndex} style={{ flexDirection: 'row', marginVertical: 4 }}>
    {row.map((item, itemIndex) => (
      <Text key={itemIndex} style={{ marginRight: 8 }}>
        {item}
      </Text>
    ))}
  </View>
))}

注意事项 #

• 文本的字体大小、字重等样式会影响宽度计算，确保测量时使用和最终渲染一致的样式。
• 若文本数据动态加载，需在数据更新时重新触发计算逻辑。
• 可封装成自定义组件，方便项目内复用。

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