如何从 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

您可以创建一个 NavigationService ref.

import { createStackNavigator, createAppContainer } from 'react-navigation';
import NavigationService from './NavigationService';

const TopLevelNavigator = createStackNavigator({ /* ... */ })

const AppContainer = createAppContainer(TopLevelNavigator);

export default class App extends React.Component {
  // ...

  render() {
    return (
      <AppContainer
        ref={navigatorRef => {
          NavigationService.setTopLevelNavigator(navigatorRef);
        }}
      />
    );
  }
}

在此处查看更多信息：Navigating without the navigation prop。

或者，您可以将订阅下移以将通知向下推送一级。

Answer 2

我建议您在导航器中使用 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，所以不需要这个。在您的第一个屏幕中使用侦听器。

如何从 Navigator 的某个地方导航？

How to navigate from somewhere out of Navigator?

javascript

reactjs

react-native

react-navigation

onesignal