如何在React Native中使用Navigator調用要轉換到的組件上的方法？

Question

我的主要導航組件如下所示：

class Main extends React.Component {
   constructor() {
      super();
      this.state = {
         views: [
            { title: 'Page 1', component: React.createElement(PageOne) },
            { title: 'Page 2', component: React.createElement(PageTwo) },
            { title: 'Page 3', component: React.createElement(PageThree) }
         ],
         currentView: 'Page 1'
      };
   }
   changeScene(data) {
      if (this.refs.navigator.getCurrentRoutes().find(r => r.title === data.title))
         this.refs.navigator.jumpTo(data);
      else
         this.refs.navigator.push(data);
      this.setState({currentView: data.title});
   }
   renderScene(route, navigator) {
      return route.component;
   }
   render() {
      return (
         <View>
            <Navigator
               ref="navigator"
               style={{flex: 1}}
               initialRoute={this.state.views[0]}
               renderScene={this.renderScene} />
         </View>
      );
   }
};

一旦在Navigator中轉換為Page組件，我想在Page組件上調用一個方法（類似onTransitionedTo ）。 我嘗試了以下方法：

   changeScene(data) {
      if (this.refs.navigator.getCurrentRoutes().find(r => r.title === data.title))
         this.refs.navigator.jumpTo(data);
      else
         this.refs.navigator.push(data);
      this.setState({currentView: data.title});

      if (data.component.onTransitionedTo)
         data.component.onTransitionedTo();
   }

但這顯然行不通。 做到這一點的最佳方法是什么？

Answer 1

也許嘗試在componentWillMount或其他適當的生命周期方法上執行傳遞的回調，以便使該組件能夠檢查是否已過渡到該組件，而不是父組件嘗試直接在子組件上執行某些操作。

在主要：

React.createElement(PageOne, { isActive: () => this._isActive(PageOne) })
...
_isActive(component) {
    let routes = this.refs.navigator.getCurrentRoutes();
    return component === routes[routes.length - 1];
}

在組件中：

componentWillMount() {
    if (this.props.isActive()) { 
        // Set state to affect render 
    }
}