Question

根据反应导航的文档，您可以使用以下命令从顶级组件调用导航：

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实际上获取了我想要发送的事件。

我无法弄清楚如何将引用（？）传递给pushcontroller组件以便我可以使用它，目前以下方法无效。我得到控制台日志告诉我fcm.ACTION.OPEN_NOTIFICATION已触发但没有发送。我想这可能是因为ref是在渲染过程中创建的，当渲染发生时它还没有通过？但是我也不确定你是否会这样做以便给另一个组件访问在同一级别声明的ref。感谢您的帮助！

Drawer + 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'}))
      }
    });
}

Answer 1

答案是将导航调用移动到在render处定义的函数并将其传递给组件。

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);

如何从顶层渲染的组件调用导航

1 个答案: