React-Native：如何从实例化它的类中控制它

2023年5月3日 218次阅读

我在我的index.ios.js文件中实例化如下：

render() {
    return(
      <Navigator
        style={styles.navigator}
        renderScene={this.renderScene}
        initialRoute={{
          component: test,
          navigationBar: <NavigationBar title="home" />
        }}/>
    );
}

从这个相同的文件我有一个功能,我希望能够在导航器上触发一个动作,例如

resetStack(){
  // navigator.popToTop();
}

我该如何实现这一目标？我以为我必须使用名为refs的东西,并尝试添加如下引用：

render() {
    return(
      <Navigator
        ref="ref1"
        style={styles.navigator}
        renderScene={this.renderScene}
        initialRoute={{
          component: test,
          navigationBar: <NavigationBar title="home" />
        }}/>
    );
}

然后用以下方法调用：
    resetStack(){
      // navigator.popToTop();
      ref1.popToTop();
    }

但这会导致错误：
找不到变量ref1

我该如何实现这一目标？如何触发子组件中的方法？

最佳答案 对于其他任何有此问题的人.我与上面的代码非常接近但忽略了将this.refs.referenceName添加到调用中,最终的代码是：

render() {
    return(
      <Navigator
        ref="ref1"
        style={styles.navigator}
        renderScene={this.renderScene}
        initialRoute={{
          component: test,
          navigationBar: <NavigationBar title="home" />
        }}/>
    );
}

并称之为：

resetStack(){
  // navigator.popToTop();
  this.refs.ref1.popToTop();
}
点赞