如何让反应式导航头动态化？

Question

在我的反应式原生应用中，我试图在标题中实现一个消息框，当点击时，它将显示一个包含用户消息的屏幕。我试图让标题中显示的消息图标根据用户是否有未读消息而变化。

在我的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>          
    ))
  }
})

这样做的结果是，除了标题外，其他的内容都没有在页眉中显示。是否可以在导航选项中查询数据，然后根据这些数据进行渲染？先谢谢你

Answer 1

在你的例子中，我的建议是你应该使用 redux 存储器来存储用户信息的已读或未读状态。

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