在React Native中，如何在一定天数后重新提示组件

Question

我有一个组件，它向用户请求某些应用程序权限。该组件提示用户要么接受许可；稍后"；。如果用户稍后单击，我希望组件在一定天数后重新提示，天数为1天后、3天后、7天后、14天后和30天后。

我目前拥有的：我有一个useEffect((，当页面最初加载时，它会显示基于标志(permissionsEnabled(的组件。该标志将检查是否已启用通知。

useEffect(() => {
if (!permissionsEnabled) {
navigateTo(permissionComponent)
} }, []);

我最初想在用户点击"时存储DateTime；稍后"；然后比较用户登录时的日期时间，并检查日期差异是否与日期匹配(在1天、3天、7天、14天、30天之后(，并以此方式重新提示组件。但我后来意识到，如果用户点击"；稍后"；存储的日期时间将再次更新，并且登录日期和新的"登录日期"之间的差异将被更新；稍后"；日期总是1天。因此，该组件将每隔一天重新提示一次。

如何更新permissionComponent标志并通过比较存储的日期来重新提示组件，以便在1、3、7、14和30天后重新提示？

Answer 1

您可以存储两个值，即用户推迟接受权限的最后一天和下一次尝试的天数，并检查当前日期是否等于最后一次尝试+再次显示模态的天数。如果用户再次单击later，则使用当前日期更新上次尝试日期，并根据当前值更新下次尝试的天数

//global constant
const DAYS_FOR_NEXT_TRY = {
0: 1,
1: 3,
3: 7,
7: 14,
14: 30,
30: 30,
};
...
useEffect(() => {
if (!permissionsEnabled) {
const lastTryDate = /* get from local storage */
const lastDaysForNextTry = /* get from local storage */
// values are null, it is the firs time
if (!lastTryDate || !lastDaysForNextTry) {
navigateTo(permissionComponent);
return;
}
const lastTryTodayDiff = /*calculate diff between lastTrydate and today */
// we haven't show the permission modal for more than permitted days
if (lastTryTodayDiff >= lastDaysForNextTry) {
navigateTo(permissionComponent);
}
}
}, []);
...

在Later按钮上按下事件

const lastTryDate = /* get from local storage */
const lastDaysForNextTry = /* get from local storage */
AsyncStorage.setItem(
'lastTryDate',
new Date()
);
AsyncStorage.setItem(
'lastDaysForNextTry',
DAYS_FOR_NEXT_TRY[lastDaysForNextTry || 0]
);