如何配置带有 redux 状态的标题栏，以便动态更改标题图标？答案

【问题标题】：How can I configure the Header bar with redux state so that the header icon should be changed dynamically?如何配置带有 redux 状态的标题栏，以便动态更改标题图标？
【发布时间】：2019-10-21 21:54:44
【问题描述】：

我将实现带有通知图标的标题栏。收到通知时，标题栏的通知图标应更改为其他通知图标。如何使用 redux 实现它？我认为 redux 是合适的解决方案。但我不确定如何将 react-navigation 标头与 redux 连接

  static navigationOptions = {
    title: "...",
    headerRight: (
      <Image
        source={require("../../../assets/notification_grey.png")}
      />
    ),
  };

所以当收到新的通知时，这个Header的右边图标应该更新为其他图标(notification_blue.png)

【问题讨论】：

您有任何代码可以与我们分享，以便我们了解您的尝试吗？
@quicklikerabbit，我分享了代码，请检查一下。

标签： react-native redux react-navigation

【解决方案1】：

您可以为您的标头创建一个新组件，将其连接到 Redux，就像您为任何其他组件所做的那样，然后将其传递给您的导航器。

例如：

Header 组件：

import React from 'react'

class HeaderRight extends React.Component {
  render() {
    // Show something about your notifications
    return <View>{this.props.notifications.length}</View>
  }
}

const mapStateToProps = state => ({
  // Get your notifications from the Redux state
  notifications: state.something.notifications,
})

export default connect(mapStateToProps)(HeaderRight)

导航器：

static navigationOptions = {
  title: "...",
  headerRight: () => <HeaderRight />,
}

您还有其他方法可以将 Header 组件传递给导航器，这只是一个示例，here 您可以找到一些替代方法。

【讨论】：

但是我需要使用 react-navigation 的原生 Header，而不是自定义的 header。你觉得有可能吗？
您可以使用相同的方法，但覆盖标题的单个部分，例如，而不是覆盖整个标题，您可以使用 headerLeft、headerRight、title 等。查看导航选项的文档
哦，是的！有用。只是在其他部分发现了一些问题。