react-native - React Native badage：单击未读消息后如何删除读点？

Question

我正在使用 react-native-paper 的徽章；这个想法是：当出现未读消息时，将显示 read_dot(badge); 并且只有userType为0（userType有：0和1）；点击消息后，红点会被移除..更何况，然后点击消息，需要导航到另一个屏幕。我已经尝试了很多次，但无法工作......你能帮我检查我的代码吗？

非常感谢 ！！

MSG.JS 组件：

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;

TryOutBadge.js 屏幕：

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;

标签： react-native