web-dev-qa-db-ja.com

React Nativeでバックグラウンドタスクを実行するにはどうすればよいですか？

React Nativeで 小さなiOSアプリ を構築し、位置追跡を行い、ユーザーが選択したサーバーに定期的にlat/lngを送信しました。ただし、これはアプリがフォアグラウンドにある場合にのみ機能します。ユーザーが他のアプリを使用しているときに、このタスクをバックグラウンドで実行するにはどうすればよいですか？

javascriptiosreact-native
70
liamzebedee

現在、残念ながら、あらゆる種類のバックグラウンドタスクはサポートされていません。参照している機能は、バックグラウンドタイマーです。このようなタイマーは この製品の痛み（機能要求） ネイティブのリアクションの場合、この機能に対する需要の増加を示すためにそれを支持することができます。

EDIT 12/2016：実際のオプションはまだありません。 RN 0.33以降は Headless JS APIがありますが、Android専用です。また、これがフォアグラウンドで実行されるとアプリがクラッシュするため、使用に注意する必要があります。それを指摘してくれた@Fengに感謝します。

51
Daniel Schmidt

そして今、 react-native-background-task があります。これは、AndroidとiOSの両方の単一のAPIです。

21
Matthew Wilcoxson

Reactネイティブエコシステムは過去数か月にわたって猛烈なペースで動いており、バックグラウンドでコードを実行できないという痛みに対処するためにいくつかのプラグインが登場しました。

https://github.com/transistorsoft/react-native-background-fetch -30秒間定期的に起動して、任意のJSコードを実行します。ウェイクアップ間の時間が15分以上になるため、高解像度のジオロケーションには適していません。

https://github.com/transistorsoft/react-native-background-geolocation -特にバックグラウンドでのジオロケーションをターゲットにしたこの状況により適しています。

10
frontendloader

私はこれを使用し、動作するようです： https://github.com/ocetnik/react-native-background-timer

イベントを定期的に発行します（アプリがバックグラウンドにある場合でも）。

SetIntervalおよびsetTimeout関数を使用できます。このAPIは、react-nativeのAPIと同じであり、既存のタイマーをバックグラウンドタイマーにすばやく置き換えるために使用できます。

import BackgroundTimer from 'react-native-background-timer';

// Start a timer that runs continuous after X milliseconds
const intervalId = BackgroundTimer.setInterval(() => {
    // this will be executed every 200 ms
    // even when app is the the background
    console.log('tic');
}, 200);

// Cancel the timer when you are done with it
BackgroundTimer.clearInterval(intervalId);

// Start a timer that runs once after X milliseconds
const timeoutId = BackgroundTimer.setTimeout(() => {
    // this will be executed once after 10 seconds
    // even when app is the the background
    console.log('tac');
}, 10000);

// Cancel the timeout if necessary
BackgroundTimer.clearTimeout(timeoutId);
6
Venryx

これらのライブラリは、目的の機能を実現するのに役立ちます。

  1. react-native-background-job
  2. react-native-background-task
  3. react-native-background-fetch

または、react-nativeの Headless JS を使用できます。ただし、Androidでのみ使用可能です。

6
Provash Shoumma