Expo : 我想每 x 分钟渲染一个 Modal

Question

我想每 X 分钟渲染一次模态，所以我尝试在 AsyncStorage 中缓存一个值，该值每 x 分钟被删除一次，并且取决于我想要渲染模态的值，但是当我的应用程序刷新时，模态出现再次，这就是我所做的：

import AsyncStorage from "@react-native-async-storage/async-storage";
import moment from "moment";

const prefix = "cache";
const expiryInMinutes = 5;

const store = async (key, value) => {
 try {
  const item = {
    value,
  timestamp: Date.now(),
     };
    await AsyncStorage.setItem(prefix + key, JSON.stringify(item));
    } catch (error) {
    console.log(error);
     }
   };

          const isExpired = (item) => {
            const now = moment(Date.now());
      const storedTime = moment(item.timestamp);
      return now.diff(storedTime, "minutes") > expiryInMinutes;
       };

       const get = async (key) => {
         try {
        const value = await AsyncStorage.getItem(prefix + key);
          const item = JSON.parse(value);

     if (!item) return null;

    if (isExpired(item)) {
     await AsyncStorage.removeItem(prefix + key);
     return null;
    }

    return item.value;
   } catch (error) {
    console.log(error);
   }
  };

    export default {
    store,
   get,
   };

然后我有这个组件，我想每 X 分钟渲染一次：

import React, { Component } from "react";
 import { Text, TouchableOpacity, StyleSheet, View } from "react-native";
 import Modal from "react-native-modal";
 import AsyncStorage from "@react-native-async-storage/async-storage";
 import cache from "../utility/cache";

  export default class PubGlobal extends Component {
     state = {
       visibleModal: "false",
      };
       componentDidMount() {
     cache.get("shown").then(
     this.setState({
     visibleModal: "true",
        })
     );
     }
     _renderButton = (text, onPress) => (
     <TouchableOpacity onPress={onPress}>
     <View style={styles.button}>
       <Text>{text}</Text>
    </View>
  </TouchableOpacity>
    );

  _renderModalContent = () => (
   <View style={styles.modalContent}>
      <Text>Hello! </Text>
      {this._renderButton("Close", () =>
       cache
      .store("shown", "false")
      .then(this.setState({ visibleModal: "false" }))
     )}
   </View>
  );
  isShown = async () => {
   try {
    const stored = await cache.get("shown");
    this.setState({ visibleModal: stored });
    console.log(this.state.visibleModal);
  } catch (error) {
    console.log(error);
   }
    };

  render() {
     return (
      <View style={styles.container}>
      {/* {this._renderButton("Default modal", () =>
        this.setState({ visibleModal: "true" })
      )} */}
      {this.state.visibleModal && (
        <Modal isVisible={this.state.visibleModal === "true"}>
          {this._renderModalContent()}
        </Modal>
      )}
     </View>
   );
   }
 }

Answer 1

在componentDidMount中，获取值后，将visibleModal设置为“true”。 您应该使用 cache.get("shown") 解析时获得的值。

 componentDidMount() {
   cache.get("shown").then(
     this.setState({
       visibleModal: "true",
     })
   );
 }