React Native FlatList多列布局元素左溢，求自动适配解决方案

问题根源 #

你代码里的**外层View设置了right: "10%"和FlatList设置了width: "120%"**是导致元素溢出的核心原因——这两个属性强行把容器拉宽并偏移，直接超出了屏幕可视范围。另外，每个卡片（card）没有设置自适应宽度，无法自动分配numColumns={4}的布局空间。

修复步骤及代码 #

1. 移除错误的偏移和宽度过载设置：删掉外层View的right: "10%"和FlatList的width: "120%"，让容器默认占满屏幕宽度。
2. 计算自适应卡片宽度：用Dimensions获取屏幕宽度，减去所有卡片的左右margin总和，再平均分配给4列。
3. 调整卡片样式：使用计算好的宽度，确保每个卡片均匀分布，同时保留margin和圆角样式。

修改后的完整代码：

import { SafeAreaView, View, FlatList, TouchableOpacity, Text, Dimensions } from 'react-native';

// 获取屏幕宽度
const screenWidth = Dimensions.get('window').width;
// 计算每个卡片的宽度：屏幕宽度减去4列的左右margin（每列左右各5，4列就是5*2*4=40），再除以4
const cardWidth = (screenWidth - 40) / 4;

export default function YourComponent() {
  // 保留你的brands、brandId、cpt等变量
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <View style={{ height: "100%", maxWidth: "100%" }}>
        <FlatList
          data={brands}
          numColumns={4}
          keyExtractor={(_, index) => index.toString()} // 修正keyExtractor，避免重复key
          renderItem={({ item }) => (
            <View style={[styles.card, { width: cardWidth }]} key={item.id}>
              <TouchableOpacity
                onPress={() => {
                  const index = brandId.indexOf(item.id);
                  if (index > -1) {
                    brandId.splice(index, 1);
                    cpt -= 1;
                  } else {
                    brandId.push(item.id);
                    cpt += 1;
                  }
                  console.log("ici ! ", cpt);
                  console.log("Il existe deja bro", brandId);
                }}
              >
                <Text style={styles.text}>{item.name}</Text>
              </TouchableOpacity>
            </View>
          )}
        />
      </View>
    </SafeAreaView>
  );
}

const styles = {
  card: {
    height: 30,
    justifyContent: "center",
    backgroundColor: "#E4E4E4",
    margin: 5,
    borderRadius: 10,
  },
  text: {
    textAlign: "center",
    fontSize: 12,
    color: "black",
  },
};

额外说明 #

• 修正了keyExtractor的写法：原代码用item作为key容易重复，改用索引或item的唯一id更稳妥。
• 去掉了text样式里的width: "100%"和paddingRight: "2%"，卡片已设固定宽度，文本默认填充容器，若需要内边距可改成对称的paddingHorizontal: 2%。

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