React Native登录跳转Profile报Can't find variable: navigation如何解决

报错原因与解决步骤 #

Can't find variable: navigation 报错的核心原因有两个：一是你写的导航配置没有被正确挂载到根组件，二是按钮组件没有拿到 navigation 变量的访问权限。按以下步骤修改即可解决：

1. 调整导航结构，补全路由配置 #

你当前的导航配置里只加了个人主页，没有把登录页加入导航栈，且根组件没有渲染导航容器。

• 先把你现在的 App.tsx 改名为 Login.tsx，避免和入口组件重名冲突
• 修改导航配置文件，补全登录页路由：

import React from "react";
import Profile from "./Profile";
import Login from "./Login"; // 导入重命名后的登录页

import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";

const Stack = createStackNavigator();

export default function Navigate() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Login">
        {/* 新增登录页路由，默认关闭头部导航 */}
        <Stack.Screen
          name="Login"
          component={Login}
          options={{ headerShown: false }}
        />
        <Stack.Screen
          name="Profile"
          component={Profile}
          options={{ title: "Profile" }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

• 修改根入口 App.tsx，直接渲染导航组件：

import Navigate from './navigations'
export default function App() {
  return <Navigate />
}

2. 传递navigation到按钮组件 #

作为路由页面的 Login 组件会自动收到导航库注入的 navigation 属性，你需要把它传递给内部的按钮组件：

// Login.tsx代码，先接收navigation参数
export default function Login({navigation}) {
  return (
    <View style={styles.container}>
      <ScrollView>
        <Text />
        <Image />
        <TextInput />
        {/* 把navigation传给按钮组件 */}
        <TouchableOpacity navigation={navigation} />
        <StatusBar barStyle="dark-content" />
      </ScrollView>
    </View>
  );
}

// 原有样式代码不变

3. 按钮组件接收navigation，执行跳转 #

修改按钮组件代码，先接收传入的 navigation，跳转时指定目标路由名：

// 按钮组件接收navigation参数，同时建议把组件名从App改成LoginButton避免重名
export default function LoginButton({navigation}) {
  const LoadProfile = () => {
    // 传入你在导航栈里配置的Profile路由名
    navigation.navigate('Profile');
  };

  // 原有渲染和样式代码不变
}

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