React native React Native badage：单击未读邮件后如何删除已读点？

我使用的是react本地纸的徽章； 想法是：当出现未读信息时，会显示读点（徽章）；并且只有userType是0（userType有：0和1）；单击消息后，红点将被删除。此外，单击消息后，将需要导航到另一个屏幕。我试过很多次了，但都不行。。。你能帮我查一下密码吗

非常感谢

MSG.JS组件：

从“React”导入React；
从“react native”导入{StyleSheet，View}；
从“react native paper”导入{Badge}；
从'react/cjs/react.development'导入{useState}；
函数MSG（{userType，visible，onPress}）{
const[show，setShow]=useState（false）；
返回(
设置显示（真）}>
{/**只有userType===1将显示此红点*/}
{userType==1&&show&&}
);
}
const styles=StyleSheet.create({
容器：{
宽度：“80%”，
身高：10，
背景颜色：“#00bff”，
},
红点：{
位置：'绝对'，
前五名，
右:5,，
宽度：5，
},
})
导出默认消息；

TryOutBadge.js屏幕：

从“React”导入React；
从“react native”导入{FlatList，StyleSheet，View}；
从“../components/MSG”导入消息；
从“../navigator/routes”导入路由；
常数msgs=[
{id:1，用户类型：0，可见：1}，
{id:2，用户类型：0，可见：0}，
{id:3，用户类型：1，可见：1}，
{id:4，用户类型：1，可见：0}，
{id:5，用户类型：0，可见：1}，
]
功能试用徽章（{navigation}）{
返回(
item.id.toString（）}
renderItem={（{item，index}）=>(
导航.导航（路线.徽章\详细信息\屏幕）}
/>
)}
/> 
);
}
const styles=StyleSheet.create({
容器：{
弹性：1，
} 
})
导出默认试用徽章；

这就像普通人读了一条未读的信息；当消息未读时，您可以单击，并将导航到消息屏幕的详细信息，然后，读取点（徽章）将消失。。

import React from 'react';
import { StyleSheet,View } from 'react-native';
import { Badge } from 'react-native-paper';
import { useState } from 'react/cjs/react.development';

function MSG({userType,visible,onPress}) {
    const [show,setShow] = useState(false);
    return (
        <View style={styles.container} onPress={onPress,()=>setShow(true)}>
           {/**only userType===1 ,will show this red_dot */}
           {userType===1&&show&&<Badge visible={visible} size={10} />}
        </View>
    );
}

const styles = StyleSheet.create({
    container : {
        width : '80%',
        height : 10,
        backgroundColor : '#00BFFF',
    },
    red_dot : {
        position : 'absolute',
        top:5,
        right : 5,
        width :5,    
    },
})
export default MSG;

import React from 'react';
import { FlatList, StyleSheet,View } from 'react-native';
import MSG from '../components/MSG';
import routes from '../navigator/routes';

const msgs = [
    {id:1,userType:0,visible:1},
    {id:2,userType:0,visible:0},
    {id:3,userType:1,visible:1},
    {id:4,userType:1,visible:0},
    {id:5,userType:0,visible:1},
]

function TryOutBadge({navigation}) {
    return (
        <View style={styles.container}>

           <FlatList
           data = {msgs}
           keyExtractor = {item=>item.id.toString()}
           renderItem = {({item,index})=>(
               <MSG 
               userType = {item.userType}
               visible = {item.visible}
               onPress = {()=>navigation.navigate(routes.BADGE_DETAIL_SCREEN)}
               />
           )}

           /> 
        </View>
    );
}


const styles = StyleSheet.create({
   container : {
       flex : 1,
   } 
})
export default TryOutBadge;