Как вызвать метод компонента, который был установлен 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() это undefined так (я полагаю) route.component не является ссылкой на экземпляр который был установлен на Login, но ссылка на тип 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} /> 
} 

, а затем поймать новые подпорки в Login компонента с переопределение componentWillReceiveProps().