React Native点击图片跳转页面无效 报navigation未定义错误

• 点击Image无跳转原因：React Native 原生Image组件本身不支持onPress点击事件，直接给它绑定跳转逻辑不会被触发，你看到的按压效果是外层TouchableOpacity自带的默认按压反馈，没有实际执行跳转代码。
• 报navigation未定义原因：报错can't find variable: navigation有两个触发点：一是你把onPress错绑在Image上，点击事件根本没有传递到可响应的组件上；二是当前作用域下没有正确获取到导航库注入的navigation实例，直接调用未定义的变量就会抛错。

1. 调整事件绑定位置：点击事件必须绑定在可响应交互的组件上，把onPress从Image移到外层的TouchableOpacity上，Image仅保留图片渲染职责。
2. 正确获取navigation对象：
   • 如果当前组件是直接注册在导航栈（Stack.Navigator/Tab.Navigator等）下的页面组件，直接从组件props中解构获取navigation
   • 如果是页面下嵌套的子组件/自定义公共组件，通过@react-navigation/native提供的useNavigation Hook 获取导航实例
3. 确认跳转目标路由First已经在导航配置中完成注册，否则会触发路由不存在的报错。

import { View, TouchableOpacity, Image, StyleSheet } from 'react-native';
import { useNavigation } from '@react-navigation/native';

const DemoComponent = () => {
  // 初始化获取navigation实例
  const navigation = useNavigation();

  return (
    <View style={styles.box}>
      <TouchableOpacity 
        style={styles.inner} 
        onPress={() => navigation.navigate('First')}
      >
        <Image source={require('./1.png')} />
      </TouchableOpacity>
    </View>
  )
}

const styles = StyleSheet.create({
  // 原有样式保持不变即可
  box: {},
  inner: {}
})

export default DemoComponent;

补充说明：

• 如果使用类组件开发，可通过withNavigation高阶组件包裹组件获取navigation，或者从顶层页面组件将navigation作为props逐层传递给子组件。
• React Native官方推荐优先使用Pressable组件替代老的Touchable系列组件做交互封装，可自定义按压反馈的全阶段效果。
• 如果按照上述步骤修改后仍拿不到navigation，请确认你的应用根组件已经包裹了NavigationContainer容器，所有导航相关逻辑必须在该容器内部才能生效。

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