React native 如何在React Native Navigation v2中更新自定义顶部栏标题组件?
我试图在自定义topBar标题组件变得可见后更新它。我尝试调用Navigation.mergeOptions并使用passProps,但没有成功 初步选择: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",
...
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上测试过