如何在组件仍使用 React Navigation 呈现时更新标题？

Question

我正在编写一个 React Native 应用程序，并且正在使用 React Navigation (V2)。在我的组件更新后，我想更新 navigationOptions 并添加一个新按钮。这是我尝试过的代码：

  static navigationOptions = ({ navigation }) => {
    const options = {
      headerTitle: SCREEN_TEXT_MENU_HEADER,
      headerStyle: {
        borderBottomWidth: 0,
        marginBottom: -5
      }
    };
    if (navigation.getParam("drawer", true)) {
      options["headerLeft"] = (
        <HeaderIconButton
          onClick={() => {
            navigation.openDrawer();
          }}
          icon={require("../../assets/icons/burgerMenu.png")}
        />
      );
    }
    if (navigation.getParam("renderBillButton", false)) {
      options["headerRight"] = (
        <HeaderIconButton
          onClick={() => {
            navigation.navigate("BillScreen");
          }}
          type="primary"
          icon={require("../../assets/icons/euro.png")}
        />
      );
    }
    return options;
  };

  componentDidUpdate = prevProps => {
    const { navigation, orders } = this.props;
    if (prevProps.orders.length !== orders.length) {
      navigation.setParams({
        renderBillButton: orders.length > 0
      });
    }
  };

这种方法的问题是，navigationOptions 在componentDidUpdate() 之后不会被重置。如何使用 React Navigation 动态调整标题？

Answer 1

您可以使用this.props.navigation.setParams() 函数来更新导航状态参数。

参考：https://reactnavigation.org/docs/en/headers.html#updating-navigationoptions-with-setparams

Answer 2

好的，这里出了问题：我还必须在componentDidMount() 中调用相同的代码，否则在加载时不会影响页面。因此，除了我的问题代码之外，我还添加了：

componentDidMount = () => {
  const { navigation, order } = this.props;
  navigation.setParams({
    renderBillButton: orders.length > 0
  });
}