React Native中FlashList组件图片不显示问题求助

你的代码里存在一个关键的大小写错误：Image组件的图片源属性应该是小写的source，而非大写的Source，这就是图片无法加载的直接原因。

核心修改点 #

将Image组件的Source改为source：

<Image style={styles.image} source={item.image} />

额外优化与检查项（若修改后仍有问题） #

• 确认图片文件路径完全正确，文件名和扩展名大小写一致（比如.jpg和.JPG会被视为不同文件）
• 可添加resizeMode属性调整图片显示方式，例如resizeMode="cover"让图片铺满容器
• 给FlashList设置estimatedItemSize属性，能优化列表滚动性能（可选）

修改后的完整代码：

import React from "react";
import { Text, StyleSheet, Image, View } from "react-native";
import { FlashList } from "@shopify/flash-list";

const ListScreen = () => {
  const Trips = [
    {
      id: 1,
      Place: "Tuscany",
      TripLength: "4 days",
      description: "A trip to a WineCountry",
      image: require("../../assets/Tuscany.jpg"),
    },
    {
      id: 2,
      Place: "Venice",
      TripLength: "7 days",
      description: "A trip to a floating city",
      image: require("../../assets/Venice.jpg"),
    },
    {
      id: 3,
      Place: "Rome",
      TripLength: "3 days",
      description: "A trip back in time",
      image: require("../../assets/Rome.jpg"),
    },
    {
      id: 4,
      Place: "Paris",
      TripLength: "8 days",
      description: "Drink wine under the Eiffel Tower",
      image: require("../../assets/Paris.jpg"),
    },
    {
      id: 5,
      Place: "Aix-enProvence",
      TripLength: "14 days",
      description: "A city of thousand fountains and lavender gardens",
      image: require("../../assets/Aix-en-Provence.jpg"),
    },
  ];

  return (
    <FlashList
      data={Trips}
      renderItem={({ item }) => (
        <View>
          <Text>{item.Place}</Text>
          <Text>{item.TripLength}</Text>
          <Text>{item.description}</Text>
          <Image style={styles.image} source={item.image} resizeMode="cover" />
        </View>
      )}
      estimatedItemSize={600}
    />
  );
};

const styles = StyleSheet.create({
  text: {
    fontSize: 20,
    marginTop: 10,
  },
  place: {
    fontSize: 18,
  },
  TripLength: {
    fontSize: 12,
  },
  description: {},
  image: {
    height: 500,
    width: "100%",
  },
});

export default ListScreen;

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