react-native - 如何调用Navigator已挂载的组件的方法？

Question

我想在调用 onDidFocus() 函数后从导航器实例化的组件(场景)中调用一个方法。

这是我实例化导航器的方式:

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

这是我的 renderScene() 方法:

renderScene(route, navigator) {

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

    return route.component
}

但是route.component.onFocus()是未定义，因为(我推测)route.component不是对实例的引用已安装 Login，但引用了 Login 类型。

那么如何获取已安装组件实例的引用？

调用onDidFocus()方法时如何调用已挂载组件的方法？

Answer 1

直接调用组件方法是一种不好的做法。如果您只是想捕捉组件激活的时刻，您可以重写 componentDidMount() 方法。

或者在更复杂的情况下，您可以在父组件中调用 setState() 并将新 Prop 传递给 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 组件中捕获新的 props。