React-Native <Navigator />:如何从实例化它的类中控制它

Question

我在我的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

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

Answer 1

对于其他任何有此问题的人.我与上面的代码非常接近但忽略了将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();
}