react native中平面列表中的项目之间有很多空白

问题描述

我试图在react native中创建一个平面列表，该列表显示图像的次数是称为“布尔值”的数组的长度的倍数（后来，我还将在平面列表中显示布尔值的内容）。虽然我可以创建和显示单位列表，但每个项目之间以及在第一个和最后一个项目的上方和下方都有很大的空间。我无法完全删除顶部和底部的边距，因为我想在平面列表的上方和下方添加其他元素。除此之外，我尝试了所有可能在网上找到的东西，但是没有任何效果。

平面列表：

        <View style={{ marginTop: "10%",marginBottom: "20%" }}>
          <FlatList
            // contentContainerStyle={{ paddingBottom: "40%",paddingTop: "5%" }}
            style={{ paddingBottom: "3%" }}
            data={bools}
            keyExtractor={(item,index) => index.toString()}
            renderItem={({ item,index }) => {
              return (
                <SafeAreaView style={styles.itemContainer}>
                  <View style={styles.iconStyle}>
                    <Image
                      source={someImage}
                      style={{ aspectRatio: 1,height: "8%" }}
                    />
                  </View>
                </SafeAreaView>
              );

            }}
          />
        </View>

样式：

styles = StyleSheet.create({
 itemContainer: {
    flex: 1,flexDirection: "row",justifyContent: "center",alignItems: "center",height: "30%",marginVertical: "3%",//paddingTop: "1%",//paddingBottom: "1%"
  },iconStyle: {
    borderWidth: 1,padding: 10,borderRadius: 50,borderColor: "#555",marginRight: "5%",resizeMode: "contain",},});
})

谢谢！

解决方法

您可以使用SafeAreaView而不是包装所有物品，并且可以根据需要提供样式安全区。

<SafeAreaView>
  <View style={{ marginTop: "10%",marginBottom: "20%" }}>
      <FlatList
        // contentContainerStyle={{ paddingBottom: "40%",paddingTop: "5%" }}
        style={{ paddingBottom: "3%" }}
        data={bools}
        keyExtractor={(item,index) => index.toString()}
        renderItem={({ item,index }) => {
          return (
            <View style={styles.itemContainer}>
              <View style={styles.iconStyle}>
                <Image
                  source={someImage}
                  style={{ aspectRatio: 1,height: "8%" }}
                />
              </View>
            </View>
          );

        }}
      />
    </View>
</SafeAreaView>

,

由于具有样式属性，因此元素之间具有间距。 在FlatList中，只需删除这些属性，第一个和最后一个项目上方和下方的空间就会消失。您必须删除这些行。

  
 contentContainerStyle={{ 
 paddingBottom: "40%",paddingTop: "5%" 
 }}
style={{paddingBottom: '3%'}}

Similary项之间的间隔归因于Styles对象的itemContainer中的空白。只需删除此行，然后项目之间的间隔也将消失

 marginVertical: "3%"

您的最终代码应该是这样的

 <View>
      <FlatList
        data={bools}
        keyExtractor={(item,index) => index.toString()}
        renderItem={({item,index}) => {
          return (
            <SafeAreaView style={styles.itemContainer}>
              <View style={styles.iconStyle}>
                <Image style={{aspectRatio: 1,height: '8%'}} />
              </View>
            </SafeAreaView>
          );
        }}
      />
    </View>
    
 const styles = StyleSheet.create({
  itemContainer: {
    flex: 1,flexDirection: 'row',justifyContent: 'center',alignItems: 'center',height: '30%',backgroundColor: 'red',//paddingTop: "1%",//paddingBottom: "1%"
  },iconStyle: {
    borderWidth: 1,padding: 10,borderRadius: 50,borderColor: '#555',marginRight: '5%',resizeMode: 'contain',backgroundColor: 'blue',},});