如何使反应导航 header 动态化？

Question

在我的 React 本机应用程序中，我试图在 header 中实现一个消息框，单击该消息框时会显示一个包含用户消息的屏幕。我正在尝试使 header 中显示的消息图标根据用户是否有未读消息而有所不同。

在我的 AppNavigator 文件中，我尝试使用一个功能来存储是否有未读消息，然后 returns 应该相应地在 header 中显示什么。

navigationOptions: ({ navigation, goBack }) => ({
  title: "Title",
  headerRight: () => {
    // unread_messages = check if user has any unread messages
    }).then((unread_messages) => (
      <View style={{flexDirection: "row"}}>
        <TouchableOpacity
          onPress={() => {
            navigation.navigate("Messages");
          }}
        >
          <View style={{ flexDirection: "row" }}>
            { unread_messages ? (
                <Ionicons name="md-mail-unread" size={20}/>
            ) : ( 
                <Ionicons name="md-mail" size={20}/>
            )
          </View>
        </TouchableOpacity>
      </View>          
    ))
  }
})

这样做除了在 header 中呈现标题外什么也没有。是否可以在 navigationOptions 中查询数据，然后根据它进行渲染？提前致谢

Answer 1

对于您的情况，我的建议是您应该使用 redux 存储来存储用户消息的已读或未读状态。

数据查询应该放在你的屏幕上，然后更新商店的状态，图标会改变。

如何使反应导航 header 动态化？

How to make react navigation header dynamic?

javascript

react-native

react-navigation

stack-navigator