将 props 中的导航传递给 React Native 和 React Navigation 中的菜单元素

Question

I'm adding a menu to every screen navigation header, so created a menu function that needs the navigation object to navigate to different screens based on the menu item tapped. But the navigation.navigate from props is undefined .

export default function GeneralMenu(props) {
    const [showMenu, setShowMenu] = useState(false);

  return (
    <View style={{}}>
      <Menu
        visible={showMenu}
        onDismiss={() => setShowMenu(false)}
        anchor={
          <TouchableOpacity onPress={() => setShowMenu(true)}>
            <MaterialCommunityIcons
              name="menu"
              size={30}
              style={{ color: 'white' }}
            />
          </TouchableOpacity>
        }>
        <Menu.Item onPress={() => { console.log(props.navigation)}} title="Screen1" />
        <Menu.Item onPress={() => {props.navigation.navigate('Screen1', {})}} title="Screen1" />
      </Menu>
    </View>
  );

Then I use it like this:

return (
    <Provider>    
        <NavigationContainer>
          
          <Stack.Navigator>
            <Stack.Screen
              name="Home"
              component={HomeComponent}
              options={{ title: 'Home',
                headerTitleAlign: 'center',
                headerTintColor: '#fff',
                headerStyle: {
                  backgroundColor: 'red'
                },
                headerRight: (navigation) => <GeneralMenu navigation={navigation} />,
              }}
            />
            ... 
            ...
        </NavigationContainer>
    </Provider>
);

The console.log() when first menu item is tapped shows:

Object {
  "canGoBack": false,
  "tintColor": "#fff",
}

As you see there is no navigate property. Please, any idea what I'm doing wrong?

Answer 1

To get navigation.navigate() you would wanna use the function syntax of options , which receives an object that contains navigation , like so:

<Stack.Screen
  name="Home"
  component={HomeComponent}
  options={({ navigation }) => ({
    title: "Home",
    headerTitleAlign: "center",
    headerTintColor: "#fff",
    headerStyle: {
      backgroundColor: "red",
    },
    headerRight: () => <GeneralMenu navigation={navigation} />,
  })}
/>

Answer 2

its happen because u shadowing name props , it should be

<Menu.Item onPress={() => { console.log(props.navigation)}} title="Screen1" />

<Menu.Item onPress={() => {props.navigation.navigate('Screen1', {})}} title="Screen1" />

Answer 3

I'm not sure why you are passing navigation through props. But for react-navigation to navigate to other screens (even from the components that are not screen themselves), you don't need to pass them through props.

You can basically access navigation object itself by using useNavigation hook like this:

const navigation = useNavigation();

and then wherever you need to use it, you can use it normally like:

navigation.navigate(Screen name goes here);