React Native FlatList 显示答案

【问题标题】：React Native FlatList displayReact Native FlatList 显示
【发布时间】：2022-12-18 11:31:40
【问题描述】：

我正在使用 rowNumber={4} 的平面列表，我想显示一些具有最大宽度的元素。

但我得到了这个结果：

如您所见，一些元素在左侧突出。我怎样才能让它自动适应？有我的代码：

<SafeAreaView>
                    <View
                      style={{
                        height: "100%",
                        maxWidth: "100%",
                        right: "10%",
                      }}
                    >
                      <FlatList
                        style={{width: "120%"}}
                        data={brands}
                        numColumns={4}
                        keyExtractor={(_, item) => item}
                        renderItem={({item}) => (
                          <View style={styles.card} key={item["id"]}>
                            <TouchableOpacity
                              onPress={() => {
                                var index = brandId.indexOf(item["id"]);
                                if (index > -1) {
                                  brandId.splice(index, 1);
                                  cpt = cpt - 1;
                                } else {
                                  brandId.push(item["id"]);
                                  cpt = cpt + 1;
                                }
                                console.log("ici ! ", cpt);
                                console.log("Il existe deja bro", brandId);
                              }}
                            >
                              <Text style={styles.text}>{item["name"]}</Text>
                            </TouchableOpacity>
                          </View>
                        )}
                      />
             </View>
     </SafeAreaView>

CSS ：

card: {
    height: 30,
    justifyContent: "center",
    backgroundColor: "#E4E4E4",
    margin: 5,
    borderRadius: 10,
  },
  text: {
    paddingRight: "2%",
    textAlign: "center",
    width: "100%",
    fontSize: 12,
    color: "black",
  },

【问题讨论】：

标签： javascript react-native react-native-flatlist

【解决方案1】：

修改卡片样式：

card: {
   flex:1,
   flexDirection:"row"
   height: 30,
   justifyContent: "center",
   backgroundColor: "#E4E4E4",
   margin: 5,
   borderRadius: 10,

【讨论】：