react-native - Flatlist 不会显示任何内容

Question

当我调用平面列表时，它不会显示任何错误，但它只显示纯白屏幕。我尝试调用数据和组件，它们工作得很好。在过去的两天里，我一直被困在这个问题上，而且我对原生反应很陌生，所以也许这是我忽略的一些愚蠢的错误

我的数据数组：-

 export default [
  {
    name: "Model S",
    tagline: "Starting at $49999",
    image: require("../../images/ModelS.jpeg"),
  },

  {
    name: "Model 3",
    tagline: "Starting at $99999",
    image: require("../../images/Model3.jpeg"),
  },

  {
    name: "Model X",
    tagline: "Starting at $68999",
    image: require("../../images/ModelX.jpeg"),
  },

  {
    name: "Model y",
    tagline: "Starting at $10999",
    image: require("../../images/ModelY.jpeg"),
  },

  {
    name: "Solar Panel",
    tagline: "Starting at $9999",
    image: require("../../images/SolarPanels.jpeg"),
  },

  {
    name: "Solar Roof",
    tagline: "Starting at $60999",
    image: require("../../images/SolarRoof.jpeg"),
  },
];

我的汽车部件：-

 import React from "react";
import { View, Text, StyleSheet, ImageBackground } from "react-native";
import StyledButton from "../button/StyledButton";

export default function car(props) {
  const { title, subtitle, image } = props.car;

  return (
    <View style={styles.carContainer}>
      <View style={styles.titles}>
        <Text style={styles.title}>{title}</Text>
        <Text style={styles.subtitle}>{subtitle}</Text>
      </View>

      <ImageBackground source={image} style={styles.image} />

      <View style={styles.buttonView}>
        <StyledButton type="primary" content="custom Order" />
        <StyledButton type="secondary" content="Existing inventory" />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  carContainer: {
    height: "100%",
    width: "100%",
    alignItems: "center",
  },

  titles: {
    top: "15%",
    textAlign: "center",
    zIndex: 1,
  },

  title: {
    fontSize: 40,
    fontWeight: "bold",
    textAlign: "center",
    color: "#393c41",
    textTransform: "uppercase",
  },

  subtitle: {
    textTransform: "uppercase",
    fontSize: 15,
    color: "#5c5d61",
    textAlign: "center",
  },

  image: {
    height: "100%",
    width: "100%",
    resizeMode: "cover",
    position: "absolute",
  },

  buttonView: {
    width: "100%",
    position: "absolute",
    bottom: 50,
    paddingRight: 10,
    paddingLeft: 10,
  },
});

包含平面列表的组件：-

import React from "react";
import { View, Text, StyleSheet, FlatList } from "react-native";
import Cars from "./cars";
import Car from "../carComponent/car";

export default function CarList() {
  return (
    <View style={styles.container}>
      <FlatList data={Cars} renderItem={({ item }) => <Car car={item} />} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    width: "100%",
  },
});

app.js :-

import { StatusBar } from "expo-status-bar";
import React from "react";
import { StyleSheet, View } from "react-native";
import Car from "./assets/components/carComponent/car";
import CarList from "./assets/components/carList/CarList";

export default function App() {
  return (
    <View style={styles.container}>
      <CarList />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "white",
    alignContent: "center",
    justifyContent: "center",
  },
});

标签： react-nativereact-native-flatlistmobile-development