使用React Navigation与Expo时遇ReferenceError：navigation变量未找到求助

Hey there, let's work through this ReferenceError: Can't find variable: navigation issue step by step—this is super common when starting out with React Navigation and Expo, so don't stress too much!

First and foremost, any component that needs access to the navigation object must be nested inside a <NavigationContainer> (from @react-navigation/native) and added as a screen in your navigator stack/tab bar. Here's a correct basic setup example:

// App.js
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './screens/HomeScreen';

const Stack = createStackNavigator();

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

If your component is outside the <NavigationContainer> or not registered as a screen in your navigator, React Navigation can't pass the navigation object to it at all.

There are two standard ways to get the navigation object—never try to use it as a global variable directly:

Option 1: Grab it from component props #

If your component is passed directly as the component prop to <Stack.Screen> (or any other navigator screen), navigation is automatically passed as a prop:

// HomeScreen.js
export default function HomeScreen({ navigation }) {
  return (
    <Button
      title="Go to Details"
      onPress={() => navigation.navigate('Details')}
    />
  );
}

Note: For class components, use this.props.navigation instead of destructuring.

Option 2: Use the useNavigation Hook #

If your component is a child of a screen component (not a direct navigator screen), use the useNavigation Hook to fetch the navigation object:

// ChildComponent.js
import { useNavigation } from '@react-navigation/native';

export default function ChildComponent() {
  const navigation = useNavigation();
  return (
    <Button
      title="Go Back"
      onPress={() => navigation.goBack()}
    />
  );
}

Mismatched versions can cause weird, hard-to-debug issues. Always use Expo's install command to get compatible dependencies:

• Install core navigation dependencies:

npx expo install @react-navigation/native react-native-screens react-native-safe-area-context

• If you're using the stack navigator, add this too:

npx expo install @react-navigation/stack

Avoid using plain npm install for these packages—npx expo install ensures versions match your Expo SDK.

You've tried some cache steps, but let's do a more complete reset:

1. Delete node_modules and lock files:

rm -rf node_modules package-lock.json yarn.lock

2. Clear Expo's build cache:

npx expo start --clear

3. Reinstall all dependencies with Expo's command:

npx expo install

• Make sure you didn't misspell navigation (e.g., navigtion is a common typo)
• Ensure you're using navigation within the correct scope—don't try to call it outside a component function or in a place where it hasn't been properly fetched.

If none of these fix the issue, sharing your navigation setup code and the component where the error occurs will help pinpoint the problem faster!

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