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

【问题标题】：How can I update a custom top bar title component in React Native Navigation v2?如何在 React Native Navigation v2 中更新自定义顶部栏标题组件？
【发布时间】：2019-04-03 23:34:34
【问题描述】：

我正在尝试更新一个自定义的 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 的已解决问题，https://github.com/wix/react-native-navigation/issues/3782，表示将在 #3030 中解决，但该问题没有里程碑，并且自 6 月以来没有任何活动。 https://github.com/wix/react-native-navigation/issues/3030

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

【问题讨论】：

标签： react-native react-native-navigation

【解决方案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 上进行测试。

【讨论】：