Hi老师，求助下

Question

hi老师，
我在做一个小功能，功能描述：
1.收到消息的时候，会出现一个红色的小点，像微信朋友圈新消息提醒一样。我用的是react-native-paper 的Badge 来做。
2.然后当你点击消息的时候，你会被转到消息的详细界面，也就是你点击的时候，会跳转到另一个界面。然后红点消失。也就是相当于你读过短信了。
3.然后这里边涉及一个问题，就是只有当userType为0的时候，有新消息的时候才会显示红点，一会儿您看我代码就能明白，我试了一下好几种方式都不奏效。。麻烦老师帮我看下代码哈，谢谢您！！

MSG.js 我的message的component:

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;

运用到的Screen : 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;

Answer 1

CrazyCodeBoy 2021-05-14 10:20:59

当红点数据变化的时候通过新创建一个msgs数组看看是否奏效呢

• 提问者 慕尼黑0536602 #1

  Hi老师，我其实听不太懂您的意思┭┮﹏┭┮ ... 最后我自己试出来了，先把所有未读的信息筛选出来，然后用flatlist render出来，然后，再利用每个index中，visible===1(未读)，减去1，就变成visible===0,红点消失。

• CrazyCodeBoy 回复 提问者 慕尼黑0536602 #2

  赞赞赞