从应用程序根目录导航应用程序

Question

我正在尝试完成接收推送通知，然后根据推送通知将我的应用导航到特定路线。推送通知的所有内容都正常工作，我只是遇到了如何从应用程序根目录导航我的应用程序的问题，或者我可能需要采取不同的方法。

// root component that hooks up to redux and renders the app
class Root extends Component {
  render() {
    return (
      <Provider store={store}>
        <App />
      </Provider>
    )
  }
}

// app component that just renders the navigated application
class App extends Component {
  componentWillMount () {
    this._notificationSubscription = Notifications.addListener(this.handleNotification)
  }

  handleNotification = notification => {
    // handler for when a push notification is received
    if (notification.origin === 'selected') {
      // this is where I need to navigate      ] 
      console.log(navigation.data)
    }
  }

  render() {
    return <NavigatedApp />
  }
}

推送通知的处理程序有效，我有可用的数据。我需要执行类似 this.props.navigation.navigate('PageDetail', { pageId }) 的操作，但显然导航属性此时不可用，因为它不在 AppNavigator 组件内。我已经尝试连接到 redux，但是我仍然遇到同样的问题，即导航调度操作在进入 AppNavigator 之前不可用。

关于如何从 App 组件或其他方法执行导航的任何想法？

Answer 1

我不知道你的场景的全貌，所以这可能不是百分百合适，但看起来确实有 to call navigate on a top level component?

[...]

import { NavigationActions } from 'react-navigation';

[...]

// app component that just renders the navigated application
class App extends Component {
  componentWillMount () {
    this._notificationSubscription = Notifications.addListener(this.handleNotification)
  }

  handleNotification = notification => {
    // handler for when a push notification is received
    if (notification.origin === 'selected') {
      // this is where I need to navigate      ] 
      console.log(navigation.data)
      this.navigator && this.navigator.dispatch(
        NavigationActions.navigate({ routeName: someRouteName })
      );
    }
  }

  render() {
    return <NavigatedApp ref={nav => { this.navigator = nav; }} />
  }
}

从应用程序根目录导航应用程序

Navigate app from the application root

react-native

react-navigation