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

Question

我正在尝试在自定义顶部栏标题组件变得可见后对其进行更新。我试过调用 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 上似乎有一个关于自定义组件的合并选项的已解决问题，https://github.com/wix/react-native-navigation/issues/3782, saying it will be resolved in #3030, however that issue does not have a milestone and hasn't had any activity since June. https://github.com/wix/react-native-navigation/issues/3030

如果有人可以提供解决方法和示例来说明如何实现这一点，我们将不胜感激。

Answer 1

可以通过 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(...);
}
...

注意：这尚未在 Android 上进行测试。

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

How can I update a custom top bar title component in React Native Navigation v2?

react-native

react-native-navigation