React Native按钮跳转报错：navigate属性未定义（Hermes引擎）

1. 确保组件在导航栈中注册 #

如果WelcomeScreen没被加入导航栈，props.navigation自然会是undefined。检查MainContainer.js的导航配置，把目标页面和WelcomeScreen都注册到栈里：

// MainContainer.js 示例配置
import { createStackNavigator } from '@react-navigation/stack';
import WelcomeScreen from './WelcomeScreen';
import YourTargetScreen from './YourTargetScreen'; // 替换成你要跳转的页面

const Stack = createStackNavigator();

const MainContainer = () => {
  return (
    <Stack.Navigator initialRouteName="Welcome">
      <Stack.Screen name="Welcome" component={WelcomeScreen} />
      <Stack.Screen name="Target" component={YourTargetScreen} />
    </Stack.Navigator>
  );
};

export default MainContainer;

2. 用useNavigation钩子替代props传递 #

函数组件推荐直接用useNavigation获取导航对象，不用依赖props传递，避免传递错误：

// WelcomeScreen.js 修改后代码
import { useNavigation } from '@react-navigation/native';
import { Button } from 'react-native';

const WelcomeScreen = () => {
  const navigation = useNavigation();

  const handleJump = () => {
    navigation.navigate('Target'); // 替换成你注册的目标页面名称
  };

  return (
    <Button title="跳转至目标页面" onPress={handleJump} />
  );
};

export default WelcomeScreen;

3. 检查App.js的导航容器结构 #

确认NavigationContainer完整包裹住MainContainer，且启动屏逻辑不干扰导航初始化：

// App.js 示例结构
import { NavigationContainer } from '@react-navigation/native';
import MainContainer from './MainContainer';
import SplashScreen from './SplashScreen';
import { useState, useEffect } from 'react';

const App = () => {
  const [isSplashVisible, setIsSplashVisible] = useState(true);

  useEffect(() => {
    // 模拟启动屏加载时长
    const timer = setTimeout(() => setIsSplashVisible(false), 2000);
    return () => clearTimeout(timer);
  }, []);

  if (isSplashVisible) {
    return <SplashScreen />;
  }

  return (
    <NavigationContainer>
      <MainContainer />
    </NavigationContainer>
  );
};

export default App;

4. 排查props传递的错误 #

如果一定要用props传递，确保传递的是正确的navigation对象，比如在导航栈内的其他页面渲染WelcomeScreen时：

// 正确传递navigation的示例
<WelcomeScreen navigation={navigation} />
// 错误示例：未传递或传递了错误的对象
<WelcomeScreen />

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