时间戳

首页 > 解决方案 > 导航器外的导航不起作用

react-native - 导航器外的导航不起作用

问题描述

我正在熟悉新的 react-navigation 版本。我在使用 navigation.navigate 方法时遇到了问题。

当前行为

当我们单击菜单按钮时，它会抛出一个错误 - Device: (65:24) undefined is not an object (evalating 'navigation.navigate') Expected Behavior

单击菜单按钮时，它应该打开抽屉 如何重现

https://snack.expo.io/W0dye1bLt

标签： react-nativereact-navigationreact-navigation-v5

解决方案

虽然FooterComponent在 NavigationContainer 内呈现，但它不是屏幕或任何导航器内，因此它不会有可用的导航上下文，也无法从useNavigation.

但是，对于这个特定问题有一个解决方法，您可以为 NavigationContainer 创建一个 ref 并将该 ref 传递给 FooterComponent。这在React Navigation docs 的“Navigating without navigation prop”部分中有详细描述。应用于您的零食，它需要进行以下更改（加上相关的进口）：

const Navigator = () => {
  const navigationRef = useRef();

  return (
    {...}
      <NavigationContainer ref={navigationRef}>
        {...}
        <FooterComponent navigationRef={navigationRef} />

const FooterComponent = ({ navigationRef }) => {
  {...}
      <TouchableOpacity onPress={() => navigationRef.current.dispatch(DrawerActions.openDrawer())
      }>

然后，您可以将相同的方法用于其他选项卡navigationRef.current.navigate('Notifications')或navigationRef.current.navigate('Home')用于其他选项卡。

你可以在这里看到这适用于你的零食：https ://snack.expo.io/POeoVzAsG

推荐阅读