如何在屏幕外获取导航对象

Question

我在 App.tsx 中有以下代码：

export default function App() {
...
  return (
    <NavigationContainer>
      <Drawer.Navigator
        initialRouteName="StackNavigation"
        drawerContent={(props) => <MainPageDrawer {...props} />}
        screenOptions={{ swipeEnabled: false }}
      >
        <Drawer.Screen name="StackNavigation" component={StackNavigator} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
...
}

如您所见，MainPageDrawer 组件不在 Drawer.Screen 组件内。但是我仍然需要访问 MainPageDrawer 中的 navigation 对象。当我在 MainPageDrawer:

中做某事时

  const navigation = useNavigation<MainScreenNavigationProp>();

我收到以下错误：

Couldn't find a navigation object. Is your component inside a screen in a navigator?

访问 Screen 组件外的 navigation 对象的正确方法是什么？

Answer 1

解决方案：我发现 useNavigation 如果在 Screen 之外无论如何都不会工作，但是这个：

(props) => <MainPageDrawer {...props} />

仍然通过 props 传递 navigation，因此您可以在没有 useNavigation 的情况下轻松访问它。我简单地重组了 navigation:

function MainPageDrawer({ navigation }) {
...
}

而且有效

如何在屏幕外获取导航对象

How to get navigation object outside Screen

react-navigation