时间戳

首页 > 解决方案 > React Native 如何制作未读消息功能？

react-native - React Native 如何制作未读消息功能？

问题描述

我需要使用 react native 制作未读消息功能。这个想法是：“未读”只会出现一次，用户点击视图后，“未读”不会出现更多..如下所示： 在此处输入图像描述

我也附上我的代码，请帮我看看，非常感谢！

import React from 'react';
import { StyleSheet,View,Text } from 'react-native';


function TryMessageScreen(props) {
    
    return (
        <View style={styles.container}>
           <View style={styles.second_container}>
               <Text>Unread</Text>
            </View>  
        </View>
    );
}

const styles = StyleSheet.create({
    container : {
        flex : 1,
        justifyContent : "center",
        alignItems : 'center',
    },
    second_container : {
        width : 200,
        height : 100,
        justifyContent : 'center',
        alignItems : 'center',
        borderWidth : 1,
        borderColor : "#000000",

    }
})
export default TryMessageScreen;

标签： react-native

解决方案

您可以使用useState()钩子来跟踪它是否被点击。它还没有被点击（unRead是假的），然后显示按钮：

更新：您可以使用异步存储来持久化。因此，首先从本地存储中读取，然后进行相应的计划：

export default function Demo() {
  return (
    <>
      <TryMessageScreen />
    </>
  );
}

const getReadStatus = async () => {
  let isRead = null;
  try {
    isRead = await AsyncStorage.getItem('read');
  } catch (e) {
    console.log(e);
  }

  return isRead;
};

const setReadToFalse = async () => {
  try {
    await AsyncStorage.setItem('read', JSON.stringify(false));
  } catch (e) {
    console.log(e);
  }
};

function TryMessageScreen(props) {
  const [unRead, setUnRead] = useState(() => getReadStatus || false);

  return (
    <>
      {unRead && (
        <View style={styles.container}>
          <View style={styles.second_container}>
            <TouchableOpacity
              onPress={async () => {
                await setReadToFalse();
                setUnRead(false);
              }}
            >
              <Text>Unread</Text>
            </TouchableOpacity>
          </View>
        </View>
      )}
    </>
  );
}

推荐阅读