如何限制flex布局下多行列表的行数？超出时显示other..

我正在用数组和flex布局构建多行水平列表，列表项文本长度不一，示例数组为：['aaaaa','aa','aaaaaaaaaaa','aaaaaaaa']。需求是：当视图换行到第二行后，如果还有后续元素需要换到第三行，就显示一个「other..」的视图替代剩余元素。

当前代码 #

const services=['aaaaa','aa','aaaaaaaaaaa','aaaaaaaa'];

<View style={styles.servicesHView}>
  {services?.map(item => {
    return (
      <View style={styles.servicesView}>
        <Text style={styles.serviceText}>{item}</Text>
      </View>
    );
  })}
</View>

样式代码 #

servicesHView: {
  marginTop: hp('2%'),
  flexDirection: 'row',
  flexWrap:  'wrap' ,
  
},
servicesView: {
  paddingVertical: hp('1%'),
  paddingHorizontal: wp('4%'),
  marginEnd: wp('2%'),
  backgroundColor: colors.semiDarkGray,
  borderRadius: 15,
  marginBottom: hp('0.8%'),
},
serviceText: {
  fontFamily: 'Nunito_SemiBold',
  fontSize: wp('4%'),
  color: colors.darkGray,
  alignSelf: 'center',
},

效果对比 #

• 期望效果：
  
• 实际效果：
  

要实现该需求，核心是计算每个列表项宽度，判断元素是否能在两行内放下，超出部分用「other..」替代。React Native没有直接获取布局换行状态的API，可通过以下步骤实现：

1. 计算单个列表项宽度 #

每个servicesView的宽度由内边距和文本宽度组成：

• 内边距+右侧margin宽度：wp('4%') * 2 + wp('2%')
• 文本宽度：可通过字体大小+字符数估算（简单场景），或用第三方库获取精确值

2. 动态计算可容纳元素数量 #

通过容器宽度计算两行最多能放下的元素数，剩余元素用「other..」替代：

完整实现代码 #

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

const { width: screenWidth } = Dimensions.get('window');

const ServiceList = () => {
  const services = ['aaaaa','aa','aaaaaaaaaaa','aaaaaaaa'];
  const containerRef = useRef(null);
  const [visibleItems, setVisibleItems] = useState([]);
  const [showOther, setShowOther] = useState(false);

  // 估算单个元素宽度（可按需调整文本宽度系数）
  const getItemWidth = (text) => {
    const textWidth = wp('4%') * text.length * 0.6;
    const containerExtra = wp('4%') * 2 + wp('2%');
    return textWidth + containerExtra;
  };

  useEffect(() => {
    if (!containerRef.current) return;
    
    containerRef.current.measure((x, y, width) => {
      let totalWidth = 0;
      let rowCount = 1;
      let visibleCount = 0;

      for (let i = 0; i < services.length; i++) {
        const itemWidth = getItemWidth(services[i]);
        
        // 当前行放不下则换行
        if (totalWidth + itemWidth > width) {
          rowCount++;
          totalWidth = itemWidth;
        } else {
          totalWidth += itemWidth;
        }

        // 仅保留两行内的元素
        if (rowCount <= 2) {
          visibleCount++;
        } else {
          break;
        }
      }

      setVisibleItems(services.slice(0, visibleCount));
      setShowOther(services.length > visibleCount);
    });
  }, []);

  // 屏幕旋转时重新计算
  useEffect(() => {
    const subscription = Dimensions.addEventListener('change', () => {
      containerRef.current?.measure((x, y, width) => {
        // 重复上述计算逻辑，或提取为公共函数
        let totalWidth = 0;
        let rowCount = 1;
        let visibleCount = 0;

        for (let i = 0; i < services.length; i++) {
          const itemWidth = getItemWidth(services[i]);
          
          if (totalWidth + itemWidth > width) {
            rowCount++;
            totalWidth = itemWidth;
          } else {
            totalWidth += itemWidth;
          }

          if (rowCount <= 2) {
            visibleCount++;
          } else {
            break;
          }
        }

        setVisibleItems(services.slice(0, visibleCount));
        setShowOther(services.length > visibleCount);
      });
    });

    return () => subscription?.remove();
  }, []);

  return (
    <View ref={containerRef} style={styles.servicesHView}>
      {visibleItems.map((item, index) => (
        <View key={index} style={styles.servicesView}>
          <Text style={styles.serviceText}>{item}</Text>
        </View>
      ))}
      {showOther && (
        <View style={styles.servicesView}>
          <Text style={styles.serviceText}>other..</Text>
        </View>
      )}
    </View>
  );
};

// 原样式保持不变
const styles = {
  servicesHView: {
    marginTop: hp('2%'),
    flexDirection: 'row',
    flexWrap: 'wrap',
  },
  servicesView: {
    paddingVertical: hp('1%'),
    paddingHorizontal: wp('4%'),
    marginEnd: wp('2%'),
    backgroundColor: colors.semiDarkGray,
    borderRadius: 15,
    marginBottom: hp('0.8%'),
  },
  serviceText: {
    fontFamily: 'Nunito_SemiBold',
    fontSize: wp('4%'),
    color: colors.darkGray,
    alignSelf: 'center',
  },
};

export default ServiceList;

补充说明 #

• 若需要更精确的文本宽度，可使用react-native-text-size库获取实际文本渲染宽度
• 监听屏幕尺寸变化，确保旋转设备时布局自动适配

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