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

执行此操作后，除了在标题中呈现标题外，什么也没有。是否可以在navigationOptions中查询数据，然后根据该数据进行渲染？预先感谢

Answer 1

对于您而言，我的建议是您应使用redux存储区来存储用户邮件的已读或未读状态。

应该在屏幕上显示数据查询，然后更新商店的状态，图标将更改。

如何使React导航标题动态化？

1 个答案: