如何使反应导航标题动态？答案

【问题标题】：How to make react navigation header dynamic?如何使反应导航标题动态？
【发布时间】：2020-06-13 15:09:34
【问题描述】：

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

在我的 AppNavigator 文件中，我尝试使用一个函数来存储是否有未读消息，然后相应地返回应该在标题中显示的内容。

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>          
    ))
  }
})

这样做只会导致标题中呈现的标题。是否可以在 navigationOptions 中查询数据，然后根据它进行渲染？提前致谢

【问题讨论】：

您需要使用Context API或Redux。

标签： javascript react-native react-navigation stack-navigator

【解决方案1】：

就您而言，我的建议是您应该使用redux store 来存储用户消息的已读或未读状态。

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

【讨论】：