Expo Router Link包裹图片后图片消失问题求助

问题根源 #

你的代码同时嵌套了Link和Pressable两个可点击容器，会引发事件冲突或样式层级异常，导致图片无法正常显示。另外也需要确认图片容器和图片本身的样式是否配置了有效尺寸。

修复方案 #

方案1：移除多余的Pressable（推荐）

Expo Router的Link本身就是可点击组件，无需额外嵌套Pressable，直接用Link包裹图片容器即可：

<Link href={`${pathname}/screen1/screen2`} style={styles.postImageView}>
  <Image style={styles.postImage} source={{ uri: postDisplayImage }} />
</Link>

方案2：保留自定义事件逻辑

如果需要执行toDetails这类自定义操作，不要嵌套Link和Pressable，改用手动路由跳转：

// 先导入router
import { router } from 'expo-router';

// 用Pressable包裹图片，合并自定义逻辑和路由跳转
<Pressable 
  onPress={() => {
    toDetails();
    router.push(`${pathname}/screen1/screen2`);
  }}
>
  <View style={styles.postImageView}>
    <Image style={styles.postImage} source={{ uri: postDisplayImage }} />
  </View>
</Pressable>

方案3：检查样式配置

确保图片容器和图片的尺寸正确设置，避免因容器尺寸为0导致图片不显示，示例样式：

import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  postImageView: {
    width: 200, // 设置明确宽度
    height: 200, // 设置明确高度
  },
  postImage: {
    width: '100%',
    height: '100%',
    resizeMode: 'cover', // 根据需求调整图片缩放模式
  },
});

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