时间戳

首页 > 解决方案 > 我如何让 datetimepicker 选择用户设置部署本地通知的时间？

react-native - 我如何让 datetimepicker 选择用户设置部署本地通知的时间？

问题描述

我怎样才能让 datetimepicker 选择用户设置的触发本地调度通知的时间？

到目前为止，我已经走了多远，但是当我在选择时间和日期时按确定时，通知会直接触发，而不是在我设置的时间触发。

date: new Date(Date.now() + 60 * 1000) // 60 秒 << 

import React, { useState } from "react";
import { Button, View } from "react-native";
import DateTimePickerModal from "react-native-modal-datetime-picker";
import PushNotification from 'react-native-push-notification';
import Fontisto from 'react-native-vector-icons/Fontisto';

const DateTimePicker = () => {
  const [isDatePickerVisible, setDatePickerVisibility] = useState(false);

  const showDatePicker = () => {
    setDatePickerVisibility(true);
  };

  const hideDatePicker = () => {
    setDatePickerVisibility(false);
  };

  const Notification = () => {
    PushNotification.configure({
      onRegister: function(token) {
        console.log("TOKEN:", token);
      },

      onNotification: function(notification) {
        console.log("NOTIFICATION:", notification);
      },

      permissions: {
        alert: true,
        badge: true,
        sound: true
      },

      popInitialNotification: true,
      requestPermissions: true
    });
  }

  const SheduledNotification = date => {
    PushNotification.localNotificationSchedule({
      //... You can use all the options from localNotifications
      id: '0',
      repeatType: 'day', // (optional) Repeating interval. Check 'Repeating Notifications' section for more info.
      largeIcon: "ic_launcher", // (optional) default: "ic_launcher"
      smallIcon: "ic_notification", // (optional) default: "ic_notification" with fallback for "ic_launcher"
      message: "My Notification Message", // (required)
     date: new Date(Date.now() + 60 * 1000) // in 60 secs 
    });
  }

  return (
    <View>
      <Fontisto style={{alignSelf: 'flex-end'}} name='date' size={30} color='#000' onPress={showDatePicker} />
      <DateTimePickerModal
        isVisible={isDatePickerVisible}
        mode="datetime"
        onConfirm={SheduledNotification}
        onCancel={hideDatePicker}
      />
    </View>
  );
};

export default DateTimePicker;

标签： react-nativereact-native-android

解决方案

您是否尝试过date直接使用new Date()...

推荐阅读