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} /> 
} 

다음은 componentWillReceiveProps()를 오버라이드 (override)과 Login 구성 요소의 새로운 소품을 잡을 수있어.