React-Native : How do I control it from the class that instantiated it

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

然后调用它:
重置堆栈(){
//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();
}