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()是undefined，因为（我认为）route.component不是对Login挂载的实例的引用，而是对{{1}类型的引用}}

那么如何获得对已挂载组件实例的引用？

如何在调用Login方法时调用已挂载的组件的方法？

Answer 1

直接调用组件方法是一种不好的做法。如果您只想捕捉组件激活的时刻，则可以覆盖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} />
}

然后在Login组件中捕获新道具，并覆盖componentWillReceiveProps()。

Answer 2

就像@farwayer建议的那样，从组件调用函数是不好的做法，因为它是耦合代码。

最后，我使用自己的事件总线通知任何感兴趣的一方，过渡已经结束。

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

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

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

2 个答案: