React Native导航问题求助：Blank页面按钮无法跳转至Login页面

报错说明 #

Couldn't find a navigation object. Is your component inside NavigationContainer?（找不到导航对象，您的组件是否在NavigationContainer内部？）

问题根源 #

你的Blank组件未被正确包裹在NavigationContainer内部，或未正确获取导航实例，导致无法调用页面跳转方法。

具体修复步骤 #

1. 配置正确的导航根结构 #

确保APP的根组件是NavigationContainer，内部嵌套栈导航器，同时将Blank和Login页面配置为栈路由：

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import Blank from './Blank';
import Login from './Login';

const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Blank">
        <Stack.Screen name="Blank" component={Blank} />
        <Stack.Screen name="Login" component={Login} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

2. 在Blank组件中正确使用导航 #

• 函数组件直接通过props解构获取navigation：

function Blank({ navigation }) {
  return (
    <Button
      title="前往登录页"
      onPress={() => navigation.navigate('Login')}
    />
  );
}

• 类组件需用withNavigation高阶组件包裹：

import { withNavigation } from '@react-navigation/native';

class Blank extends React.Component {
  render() {
    return (
      <Button
        title="前往登录页"
        onPress={() => this.props.navigation.navigate('Login')}
      />
    );
  }
}

export default withNavigation(Blank);

3. 排查常见错误 #

• 禁止在NavigationContainer外部渲染Blank组件，否则无法获取导航上下文。
• 确认跳转时的路由名称和栈配置里的name完全一致（区分大小写）。
• 检查依赖是否安装完整：@react-navigation/native、react-native-screens、react-native-safe-area-context、@react-navigation/stack。

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