javascript - 如何从 Navigator 之外的某个位置进行导航？

Question

Navigator.js

const App = createStackNavigator({
  screenA: { screen: ScreenA },
  screenB: { screen: ScreenB }
})

const Navigator = createAppContainer(App);

export default Navigator;

App.js

return (
  <SafeAreaView>
    <Provider store={store}>
      <MainNavigator />
    </Provider>
  </SafeAreaView>
)

上面的代码是我配置 React-Navigation V3 的方式。在 App.js 上，它还订阅推送通知事件，如下所示

componentDidMount() {
  OneSignal.addEventListener('opened', this.onOpened);
}

onOpened = ({ notification }) => {
  //How to navigate to screenB?
}

所以我的问题是，由于 App.js 没有被 MainNavigator 包装，订阅的事件如何将用户导航到特定屏幕？

Answer 1

我建议在导航器中使用 onesignal。它将按预期工作。但是，在您的问题中，您询问了一种在导航器之外进行导航的方法。这是一个虚拟代码来执行此操作。

        <Navigation ref={nav => { this.navigator = nav; }} />

获取导航的引用，this.navigator 将具有许多属性。包括导航。

然后你可以这样做，

goToSomething = () => {

 console.log(this.navigator); //check all the methods it has
 this.navigator._navigation.navigate('Something');
 // NOTE: here it is _navigation, not navigation
}

  <Navigation ref={nav => { this.navigator = nav; }} />
<YourComponent goToSomething={this.goToSomething}/>

我发现您已经使用了 onesignal，因此不需要它。在第一个屏幕中使用监听器。