現在,react native でアラームアプリを作成しています。その中で setIntervalを使って、セットした時間と現在の時間が同じになるまで関数をよびだしつづける処理を書いたのですが、タスクキルするとsetIntervalが止まってしまいます。
タスクキルしてアプリを終了した後もsetIntervalを作動させ続けるコーディングがあるのか教えていただきたいです。
また、もしそのような方法がない場合や、便利なライブラリなどがあれば教えていただきたいです。
タイムピッカーにはreact-native-modal-datetime-pickerというライブラリを使っています。
以下がコードになります。
今回の質問に該当するのが「@@現在の日時を取得及びアラーム関数」の部分です。
javascript
1import React, { useState, useEffect } from 'react'; 2import { 3 View, 4 Button, 5} from 'react-native'; 6import DateTimePickerModal from 'react-native-modal-datetime-picker'; 7import LogOutButton from '../components/LogOutButton'; 8export default function PickerScreen(props) { 9 10 const [date, setDate] = useState(''); 11 const [time, setTime] = useState(''); 12 13 // @@現在の日時を取得及びアラーム関数 14 const checkTime = () => { 15 const originDate = new Date(); 16 const formatDate = require('date-fns/format'); 17 const currentDate = formatDate(originDate, 'yyyy年MM月dd日'); 18 const formatTime = require('date-fns/format'); 19 const currentTime = formatTime(originDate, 'HH時mm分'); 20 console.log(currentTime); 21 if (date === currentDate && time === currentTime) { 22 console.log('時間です'); 23 } else { 24 console.log('アラーム起動失敗'); 25 } 26 }; 27 const Alarm = () => { 28 setInterval(() => { 29 checkTime(); 30 }, 1000); 31 }; 32 33 // @@@Datepickerの設定 34 const [isDatePickerVisible, setDatePickerVisibility] = useState(false); 35 const showDatePicker = () => { 36 setDatePickerVisibility(true); 37 }; 38 const hideDatePicker = () => { 39 setDatePickerVisibility(false); 40 }; 41 const handleDateConfirm = (selectedDate) => { 42 const formatDate = require('date-fns/format'); 43 const submitDate = formatDate(selectedDate, 'yyyy年MM月dd日'); 44 setDate(submitDate); 45 hideDatePicker(); 46 }; 47 48 // @@@Timepickerの設定 49 const [isTimePickerVisible, setTimePickerVisibility] = useState(false); 50 const showTimePicker = () => { 51 setTimePickerVisibility(true); 52 }; 53 const hideTimePicker = () => { 54 setTimePickerVisibility(false); 55 }; 56 const handleTimeConfirm = (selectedTime) => { 57 const formatTime = require('date-fns/format'); 58 const submitTime = formatTime(selectedTime, 'HH時mm分'); 59 setTime(submitTime); 60 hideTimePicker(); 61 }; 62 63 64 return ( 65 <View> 66 <View> 67 <Button title="日付を選択" onPress={showDatePicker} /> 68 <DateTimePickerModal 69 isVisible={isDatePickerVisible} 70 mode="date" 71 onConfirm={handleDateConfirm} 72 onCancel={hideDatePicker} 73 confirmTextIOS="決定" 74 cancelTextIOS="戻る" 75 display="inline" 76 locale="ja-JA" 77 /> 78 </View> 79 <View> 80 <Button title="時間を選択" onPress={showTimePicker} /> 81 <DateTimePickerModal 82 isVisible={isTimePickerVisible} 83 mode="time" 84 onConfirm={handleTimeConfirm} 85 onCancel={hideTimePicker} 86 confirmTextIOS="決定" 87 cancelTextIOS="戻る" 88 /> 89 </View> 90 <Button 91 title="アラーム始動" 92 onPress={Alarm} 93 /> 94 </View> 95 ); 96} 97
アプリが終したら setInterval は当然停止します。というか、定期的にポーリングで時刻をチェックするのは良くないですね。アラームに関しては、各 OS が専用の API を用意してますが、React Native から使う方法は知りません…。
返信ありがとうございます。
あまり良くないといいうことですが、どのようにアラームを設定すればよりよい設計になるのでしょうか。
丁寧な回答ありがとうございます。
参考にして頑張ってみます。
あなたの回答
tips
プレビュー