React-Native <Navigator/> ：如何从实例化它的 class 控制它

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

renderScene 方法通过路由和导航器上下文调用，它允许您将导航器传递到场景组件中：

renderScene(route, navigator) {
  return <ExampleScene navigator={navigator} />;
}

从 ExampleScene 中，您现在可以调用 this.props.navigator.popToTop()。

或者，从导航器中的组件调用 Navigator.getContext(this)：

Navigator.getContext(this).popToTop();

文档可在此处获取：https://facebook.github.io/react-native/docs/navigator.html#navigation-context

Answer 2

对于遇到此问题的其他人。我非常接近上面的代码，但忽略了将 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();
}

React-Native <Navigator/> ：如何从实例化它的 class 控制它

React-Native <Navigator/> : How do I control it from the class that instantiated it

navigator

react-native