在react-navigation v5中将ref传递给NavigationContainer中的调度

Question

我以前在导航中一直使用createAppContainer。现在，当升级到react-navigation v5时，我无法找到已通过的调度参考的替代品。下面给出了来自React导航的示例代码：

const AppContainer = createAppContainer(AppNavigator);

class App extends React.Component {
  someEvent() {
    // call navigate for AppNavigator here:
    this.navigator &&
      this.navigator.dispatch(
        NavigationActions.navigate({ routeName: someRouteName })
      );
  }
  render() {
    return (
      <AppContainer
        ref={nav => {
          this.navigator = nav;
        }}
      />
    );
  }
}

Answer 1

根据文档，在第 5 版中，不会静态访问屏幕。这意味着只有兄弟/父/子屏幕可以直接访问，而对于其他屏幕，您必须为导航器指定层次结构以查找和访问嵌套屏幕。

这是它的工作原理（另外请注意，routeName 现在是 name，NavigationActions 现在是 CommonActions 并从 @react-navigation/native 导入) :

import {CommonActions} from '@react-navigation/native';

this.navigator.dispatch(
  CommonActions.navigate({name: someRouteName, //immediate screen to start with
                          params:{ screen: **the nested screen name** }
                         })
);

您可以递归地执行此操作，以访问更深的屏幕。为此，只需将此对象传递给 dispatch 函数：

//object to pass to CommonActions.navigate for dispatch:
{name: screen1Name, 
  params:{screen: screen2Name, 
    params:{screen: screen3Name, 
      params:{screen: screen4Name, 
        params:{screen: screen5Name
        }
      }
    }
  }
}

如果您想使用 navigation.navigate 实现相同的目标，只需将第一个屏幕的名称添加为第一个参数，并将对象添加为 param。就这样

//2 arguments to pass into navigation.navigate:
(screen1Name, // <--- The first screen is given as a separate argument
  params:{screen: screen2Name, 
    params:{screen: screen3Name, 
      params:{screen: screen4Name, 
        params:{screen: screen5Name
        }
      }
    }
  )

---

还要记住，AppContainer 现在是 NavigationContainer 并且是从 @react-navigation/native

导入的