渲染項目之間的空間太多 flatlist React Native

Question

我一直在嘗試從 flatlist 渲染項目，組件渲染正確，但是渲染組件之間的空間太大。 我確定我沒有創建空間。 此外，平面列表中的最后一項不會完全顯示，因為平面列表不會滾動到項目的底部。 請在下面查看我的代碼和屏幕截圖

成分

import { View, Text, StyleSheet, Image } from "react-native";
import { FontAwesome, MaterialCommunityIcons } from "@expo/vector-icons";

export default function PostComponent() {
  return (
    <View
      style={{
        width: "90%",
        backgroundColor: "blue",
        marginVertical: 10,
        alignSelf: "center",
      }}
    >
      <View
        style={{
          height: "20%",
          width: "100%",
          backgroundColor: "white",
          flexDirection: "row",
          marginBottom: 5,
          paddingHorizontal: 5,
        }}
      >
        <View
          style={{
            width: "30%",
            height: "100%",
            borderRadius: 50,
            overflow: "hidden",
          }}
        >
          <Image
            style={{ width: "100%", height: "100%" }}
            source={require("../assets/imggg.jpg")}
          />
        </View>
        <View
          style={{
            width: "70%",
            height: "100%",
            justifyContent: "center",
            padding: 10,
          }}
        >
          <Text style={{ fontSize: 20, fontWeight: "bold" }}>Jane Doe</Text>
          <Text style={{ fontSize: 15, fontStyle: "italic" }}>
            Something Casual
          </Text>
        </View>
      </View>
      <View style={{ width: "100%", backgroundColor: "white" }}>
        <View style={{ overflow: "scroll" }}>
          <Text style={{ textAlign: "justify" }}>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime
            mollitia, molestiae quas vel sint commodi repudiandae consequuntur
            voluptatum laborum numquam blanditiis harum quisquam eius sed odit
            fugiat iusto fuga praesentium optio, eaque rerum!
          </Text>
        </View>
        <View
          style={{
            width: "100%",
          }}
        >
          <Image
            style={{ width: "100%" }}
            source={require("../assets/imggg.jpg")}
          />
        </View>
      </View>
      <View
        style={{
          flexDirection: "row",
          justifyContent: "space-evenly",
          paddingTop: 10,
        }}
      >
        <FontAwesome name="heart" size={35} color="black" />
        <MaterialCommunityIcons name="poker-chip" size={35} color="#e6b800" />
        <FontAwesome name="comment" size={35} color="black" />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({});

使成為

import { View, Text, StyleSheet, Image, FlatList } from "react-native";
import PostComponent from "../../Components/PostComponent";
import { auth, db, storage } from "../../firebase";
import { collection, query, getDocs, orderBy } from "firebase/firestore";

const postData = [];
async function getPosts() {
  const q = query(collection(db, "Posts"), orderBy("postTime"));
  const querySnapshot = await getDocs(q);
  querySnapshot.forEach((doc) => {
    // doc.data() is never undefined for query doc snapshots

    postData.push({ id: doc.id, ...doc.data() });
  });
}

function Posts() {
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    getPosts()
      .then(() => {
        setLoading(false);
      })
      .catch((e) => console.log(e));
  }, []);

  const renderPosts = ({ item }) => <PostComponent />;

  if (loading) {
    return <Text>Loading Posts</Text>;
  }
  return (
    <View style={{ backgroundColor: "pink", height: "100%" }}>
      <FlatList data={postData} renderItem={renderPosts} />
    </View>
  );
}

const styles = StyleSheet.create({});

export default Posts;

結果

Answer 1

您可以嘗試使用元素檢查器來檢查空間來自哪個元素，然后您可以從那里修復它