Navigatorがマウントしたコンポーネントのメソッドを呼び出す方法は？

Question

onDidFocus()関数が呼び出されると、ナビゲータがインスタンス化したコンポーネント（シーン）からメソッドを呼び出す必要があります。

これは私がナビゲーターをインスタンス化する方法である：

<Navigator 
    initialRoute={{ name: 'Login' }} 
    renderScene={ this.renderScene } 
    configureScene={(route, routeStack) => Navigator.SceneConfigs.FloatFromRight} 
    onDidFocus={(route) => route.component.onFocus()} 
    /> 

そして、これが私のrenderScene()方法です：route.componentはインスタンスへの参照ではありません（私は推測）以来

renderScene(route, navigator) { 

    if(route.name == 'Login') { 
     route.component = <Login navigator={navigator} {...route.passProps} /> 
    } 

    return route.component 
} 

しかしroute.component.onFocus()はundefinedですこれはLoginでマウントされていましたが、タイプはです。

したがって、マウントされたコンポーネントのインスタンスへの参照を取得するにはどうすればよいですか？

onDidFocus()メソッドが呼び出されたときにマウントされたコンポーネントのメソッドを呼び出すにはどうすればよいですか？

Answer 1

@farwayerが示唆するように、コンポーネントから関数を呼び出すことは、結合されたコードであるため、悪い習慣です。

最終的には私たち自身のイベントバスを使用して、利害関係者に移行が終了したことを通知します。

onDidFocus(){ 
    EventBus.ref().emit('NAVIGATOR_TRANSITION_END') 
} 

render() { 
    return (
     <Navigator 
      ... 
      onDidFocus={ this.onDidFocus } 
      /> 
    ) 
} 

Answer 2

コンポーネントメソッドを直接呼び出すのは悪い習慣です。コンポーネントがアクティブになったときに瞬間をキャッチしたい場合は、componentDidMount()メソッドをオーバーライドすることができます。

さらに複雑な状況では、setState()を親コンポーネントで呼び出し、新しい小道具をLoginに渡すことができます。このような何か：その後、

<Navigator 
    initialRoute={{ name: 'Login' }} 
    renderScene={ this.renderScene } 
    configureScene={(route, routeStack) => Navigator.SceneConfigs.FloatFromRight} 
    onDidFocus={(route) => this.setState({currentRoute: route})} /> 

renderScene(route, navigator) { 
    return <Login 
     currentRoute={this.state.currentRoute} 
     navigator={navigator} 
     {...route.passProps} /> 
} 

とcomponentWillReceiveProps()をオーバーライドしてLoginコンポーネントに新しい小道具をキャッチ。