React native 如何在React Native Navigation v2中更新自定义顶部栏标题组件?

React native 如何在React Native Navigation v2中更新自定义顶部栏标题组件?,react-native,react-native-navigation,React Native,React Native Navigation,我试图在自定义topBar标题组件变得可见后更新它。我尝试调用Navigation.mergeOptions并使用passProps,但没有成功 初步选择: ... static options(passProps) { return { topBar: { title: { component: { id: "rn.MyCustomTopBar", name: "rn.MyCustomTopBar",

我试图在自定义topBar标题组件变得可见后更新它。我尝试调用Navigation.mergeOptions并使用passProps,但没有成功

初步选择:

...
static options(passProps) {
  return {
    topBar: {
      title: {
        component: {
          id: "rn.MyCustomTopBar",
          name: "rn.MyCustomTopBar",
          alignment: "fill",
          passProps: {
            dynamicField: "Initial Value"
          }
        }
      }
    }
  };
}
...
使用合并选项:

...
Navigation.mergeOptions(this.props.componentId, {
  topBar: {
    title: {
      component: {
        passProps: {
          dynamicField: "New Value"
        }
      }
    }
  }
});
...
GitHub上似乎有一个关于自定义组件上的mergeOptions的已解决问题,称该问题将在#3030中解决,但该问题没有里程碑,自6月以来没有任何活动


如果有人能提供一个解决方法和如何实现这一点的例子,我们将不胜感激

通过passProps将引用传递回父级,可以更新自定义顶部栏。然后,父级可以使用引用调用顶部栏中的函数,该函数将适当更改其状态

父组件:

...
constructor() {
  super(props);
  Navigation.events().bindComponent(this);

  this._customTopBar = null;
}
...
componentDidMount() {
  Navigation.mergeOptions(this.props.componentId, {
    topBar: {
      title: {
        component: {
          passProps: {
            passRef: ref => {
              this._customTopBar = ref;
            }
          }
        }
      }
    }
  });
}
...
// called whenever custom title needs to be updated
this._customTopBar.updateState(...);
...
...
componentDidMount() {
  this.props.passRef(this);
}
...
updateState(...) {
  this.setState(...);
}
...
自定义组件:

...
constructor() {
  super(props);
  Navigation.events().bindComponent(this);

  this._customTopBar = null;
}
...
componentDidMount() {
  Navigation.mergeOptions(this.props.componentId, {
    topBar: {
      title: {
        component: {
          passProps: {
            passRef: ref => {
              this._customTopBar = ref;
            }
          }
        }
      }
    }
  });
}
...
// called whenever custom title needs to be updated
this._customTopBar.updateState(...);
...
...
componentDidMount() {
  this.props.passRef(this);
}
...
updateState(...) {
  this.setState(...);
}
...
注意:这还没有在Android上测试过