質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
React Native

React Nativeは、ネイティブモバイルアプリ(iOS/Android)を作成できるJavaScriptフレームワークです。Reactと同じ設計のため、宣言的なコンポーネントでリッチなUIを開発することが可能です。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

0回答

1271閲覧

react native でsetIntervalをタスクキル後も作動させ続ける方法

taro3104

総合スコア4

React Native

React Nativeは、ネイティブモバイルアプリ(iOS/Android)を作成できるJavaScriptフレームワークです。Reactと同じ設計のため、宣言的なコンポーネントでリッチなUIを開発することが可能です。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2021/12/15 11:52

編集2021/12/15 11:55

現在,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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hoshi-takanori

2021/12/15 20:14

アプリが終したら setInterval は当然停止します。というか、定期的にポーリングで時刻をチェックするのは良くないですね。アラームに関しては、各 OS が専用の API を用意してますが、React Native から使う方法は知りません…。
taro3104

2021/12/16 14:11

返信ありがとうございます。 あまり良くないといいうことですが、どのようにアラームを設定すればよりよい設計になるのでしょうか。
taro3104

2021/12/20 11:02

丁寧な回答ありがとうございます。 参考にして頑張ってみます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問