如何从在顶层渲染的组件中调用导航功能

Question

根据react-navigation文档，您可以使用以下方法从顶层组件调用导航：

import { NavigationActions } from 'react-navigation';

const AppNavigator = StackNavigator(SomeAppRouteConfigs);

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

然而，我正在努力弄清楚如果处理分发逻辑的组件在呈现器上与导航器相同级别时，该如何完成此操作？在我的情况下，我创建了我的导航器（具有堆栈导航器和其他嵌套导航器的抽屉），然后使用<Drawer>呈现它们。在同一级别上，我加载我的<PushController>组件以处理推送通知。实际上，pushcontroller获取了我要分发的事件。

我无法弄清楚如何将ref传递给pushcontroller组件，以便我可以使用它，目前以下内容不起作用。我得到了控制台日志告诉我fcm.ACTION.OPEN_NOTIFICATION已触发，但没有分发发生。我想这可能是因为ref在渲染期间创建，并且当渲染发生时尚不可用于传递？但我也不确定您是否会以这种方式执行操作，以便让另一个组件访问在同一级别声明的ref。提前感谢您的帮助！

抽屉+PushController渲染

  render(){
      return(
        <View style={{flex: 1}}>
          <Drawer ref={nav => { this.navigator = nav; }}/>
          <PushController user={this.props.user} navigator={this.navigator}/>
        </View>
      )
  }

PushController片段：

import { NavigationActions } from 'react-navigation';

async doFCM() {
    FCM.getInitialNotification().then(notif => {
      console.log('Initial Notification', notif);
      if(notif.fcm.action === "fcm.ACTION.OPEN_NOTIFICATION"){
        console.log('fcm.ACTION.OPEN_NOTIFICATION triggered', notif);
        this.props.navigator && this.props.navigator.dispatch(NavigationActions.navigate({routename: 'Chat'}))
      }
    });
}

- rt_

Answer 1

答案是将导航调用移动到在渲染时定义的函数中，并将其传递给组件。

import { NavigationActions } from 'react-navigation';

...
//class definition omitted for brevity
  render(){
    const callNavigate = (routeName, params) => {
      console.log('Params', params);
      this.navigator.dispatch({
        type: NavigationActions.NAVIGATE,
        routeName: routeName,
        params: params
      }) 
    }

      return(
        <View style={{flex: 1}}>
          <Drawer ref={nav => this.navigator = nav }/>
          <PushController callNavigate={callNavigate}/>
        </View>
      )
  }

该函数在PushController中被调用，如下所示：

  this.props.callNavigate('RouteName', params);

- rt_