如何配置具有 redux 状态的标题栏，以便动态更改标题图标?

Question

我将实现带有通知图标的标题栏。 收到通知后，标题栏的通知图标应更改为其他通知图标。 如何使用 Redux 实现它？我认为 redux 是它的正确解决方案。但我不确定如何将反应导航标头与 redux 连接

起来

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

因此，当收到新通知时，标题的右侧图标应更新为其他图标(notification_blue.png(

Answer 1

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

例如：

标头组件：

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 组件传递给导航器，这只是一个例子，在这里您可以找到一些替代方案。