如何在React Native中使用Navigator对正在转换为的组件调用方法

How to call method on component that is being transitioned to with Navigator in React Native?

本文关键字：转换 组件 方法 调用 Navigator React Native      更新时间：2023-09-26

我的主要导航组件如下所示：

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>
      );
   }
};

在导航器中将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();
   }

但这显然是行不通的。实现这一目标的最佳方式是什么？

也许可以尝试在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 
    }
}
相关文章：