React Native按钮点击导航报错：navigation.navigate未定义如何解决？

Hey there! That error pops up because your App component doesn't have access to the navigation prop. Let's go through the most common fixes depending on your setup:

1. Use the useNavigation Hook (Function Components) #

This is the simplest approach for modern function components. You'll need to import the hook from React Navigation and initialize it inside your component:

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

const App = () => {
  // Get the navigation object using the hook
  const navigation = useNavigation();

  return (
    <TouchableOpacity 
      style={styles.button} 
      onPress={() => navigation.navigate("ViewDrafts")}
    >
      <Text style={styles.content}>View Drafts</Text>
    </TouchableOpacity>
  );
};

// Example styles (customize as needed)
const styles = StyleSheet.create({
  button: {
    padding: 12,
    backgroundColor: '#2196F3',
    borderRadius: 4,
    margin: 20,
  },
  content: {
    color: 'white',
    fontSize: 16,
    textAlign: 'center',
  }
});

export default App;

2. Ensure Your Component is in the Navigation Stack #

If your App component is supposed to receive the navigation prop automatically, double-check that it's registered as a screen in your navigation stack. For example:

// In your main navigation setup file (e.g., Navigation.js)
import { createStackNavigator } from '@react-navigation/stack';
import App from './App';
import ViewDrafts from './ViewDrafts';

const Stack = createStackNavigator();

function Navigation() {
  return (
    <Stack.Navigator>
      {/* Register App as a screen in the stack */}
      <Stack.Screen name="Home" component={App} />
      <Stack.Screen name="ViewDrafts" component={ViewDrafts} />
    </Stack.Navigator>
  );
}

If App is a child component of a screen (not a screen itself), you'll need to pass the navigation prop down manually from the parent screen, or use the useNavigation hook instead.

3. Use withNavigation HOC (For Class Components) #

If you were working with a class component (though your example uses a function component), you can wrap your component with the withNavigation higher-order component to inject the navigation prop:

import { withNavigation } from '@react-navigation/native';
import React, { Component } from 'react';
import { TouchableOpacity, Text, StyleSheet } from 'react-native';

class App extends Component {
  render() {
    return (
      <TouchableOpacity 
        style={styles.button} 
        onPress={() => this.props.navigation.navigate("ViewDrafts")}
      >
        <Text style={styles.content}>View Drafts</Text>
      </TouchableOpacity>
    );
  }
}

// Wrap the component when exporting
export default withNavigation(App);

Why This Error Happens #

React Navigation only automatically passes the navigation prop to components that are directly rendered as screens in your navigator (via Stack.Screen, Tab.Screen, etc.). If your component is nested deeper, or not registered as a screen, you'll need to use one of the methods above to access the navigation object.

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