Expo列表页跳转详情页仅显标题副标题，图片不显示求助

我帮你排查出两个核心问题，这就是图片无法显示的原因：

1. 字段访问错误 #

在ListingsScreens里，你传递给详情页的是完整的item对象，其中图片地址存在于item.images[0].url，但在ListingDetailsScreen里，你错误地尝试访问listing.image——这个字段根本不存在，自然拿不到图片地址。

2. 网络图片的source格式错误 #

React Native的Image组件加载网络图片时，不能直接把URL字符串传给source，必须用{ uri: '图片地址' }的格式（本地图片才用require()）。

修正后的ListingDetailsScreen代码 #

export default function ListingDetailsScreen({ route }) {
  console.log(route);
  const listing = route.params;
  // 用可选链避免字段不存在时的崩溃
  const imageUrl = listing?.images?.[0]?.url;

  return (
    <View style={styles.Screen}>
      <View style={styles.card}>
        {/* 仅当图片地址存在时渲染图片，同时修正source格式 */}
        {imageUrl && <Image style={styles.CardImage} source={{ uri: imageUrl }} />}
        <View style={styles.tittleContainer}>
          <AppText style={styles.title}>{listing.title}</AppText>
          {/* 和列表页统一价格格式 */}
          <AppText style={styles.subtitle}>${listing.price}</AppText>
        </View>
      </View>
      <ListItem 
        image={require("../assets/dummyFemale.png")} 
        title="Anna bella" 
        subtitle="suck 5 person blood" 
      />
    </View>
  );
}

额外优化建议 #

• 建议传递参数时明确指定字段，比如改成navigation.navigate("ListingDetails", { listing: item })，这样在详情页用route.params.listing获取数据，代码可读性更高，也不容易混淆字段。
• 始终保留可选链?.的判断，避免后端返回的某个item没有图片字段时，页面出现崩溃报错。

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