React Native使用useNavigation()跳转DummyComponent无响应如何解决？

核心问题原因 #

你代码中最直接的错误是 navigation.navigate 方法的参数使用不符合React Navigation的规范：该方法的第一个参数是你在导航器中预先注册的路由名称字符串，不能直接传入组件本身。

分步修复步骤 #

• 第一步：注册Dummy页面路由
  你需要先在导航器配置（如Stack Navigator、Tab Navigator等）中提前注册Dummy页面对应的路由，示例如下：

// 导航配置文件示例
import { createStackNavigator } from '@react-navigation/stack';
import DummyComponent from "./DummyComponent";
// 导入你当前写跳转逻辑的父组件所在页面
import HomeScreen from "./HomeScreen";

const Stack = createStackNavigator();

function AppStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeScreen} />
      {/* 注册Dummy路由，name字段的值就是后续跳转时要传的字符串 */}
      <Stack.Screen name="Dummy" component={DummyComponent} />
    </Stack.Navigator>
  );
}

• 第二步：确认NavigationContainer上下文配置
  useNavigation 只能在被NavigationContainer包裹的组件子树内生效，需要确保应用入口已经包裹了该组件：

// 应用入口文件示例
import { NavigationContainer } from '@react-navigation/native';

export default function App() {
  return (
    <NavigationContainer>
      <AppStack />
    </NavigationContainer>
  );
}

• 第三步：修改跳转逻辑代码
  把navigate方法的参数改成你第一步注册时填写的路由名称字符串：

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

const navigation = useNavigation();

const dummyPage = () => {
    // 传入注册时定义的路由名称字符串即可
    navigation.navigate("Dummy");    
}

<TouchableOpacity onPress={dummyPage}>
    <View style={{backgroundColor: "red", width: 150, height: 50}}>
        <Text>Dummy</Text>
    </View>
</TouchableOpacity>

额外排查点 #

如果修改后还是没有反应，可以先在dummyPage函数内添加console.log验证点击事件是否触发，排除TouchableOpacity被上层元素遮挡、点击区域被拦截的布局问题。

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