React Native中传递navigation给菜单组件时navigate未定义的问题

我正在为每个屏幕的导航头部添加菜单，因此创建了一个需要navigation对象的通用菜单函数，用于根据点击的菜单项跳转到不同屏幕。但props中的navigation.navigate为undefined。

代码示例 #

通用菜单组件GeneralMenu #

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>
  );

组件使用方式 #

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>
);

点击菜单项的控制台输出 #

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

可见该navigation对象中没有navigate属性，请问我哪里出错了？

解决方案 #

问题出在headerRight的参数上——你现在拿到的不是完整的navigation导航对象，而是头部配置的参数对象，这个对象仅包含和导航头部相关的属性（比如canGoBack、tintColor），没有navigate这类核心导航方法。

要获取完整的导航对象，需要从headerRight的参数里解构出navigation属性，修改你的headerRight配置：

headerRight: ({ navigation }) => <GeneralMenu navigation={navigation} />,

修改后传入GeneralMenu的就是包含navigate方法的完整导航对象，此时调用props.navigation.navigate('Screen1')就能正常触发页面跳转。

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