web-dev-qa-db-fra.com

Comment puis-je exécuter des tâches en arrière-plan dans React Native?

J'ai construit un petite application iOS dans React Native qui effectue le suivi de l'emplacement, en envoyant régulièrement les données lat/lng à un serveur choisi par l'utilisateur. Cependant, cela ne fonctionne que lorsque l'application est au premier plan. Comment puis-je exécuter cette tâche en arrière-plan lorsque l'utilisateur est dans d'autres applications?

javascriptiosreact-native
70
liamzebedee

Actuellement, il n’existe malheureusement aucun support pour les tâches d’arrière-plan. La fonctionnalité à laquelle vous faites référence serait un minuteur d’arrière-plan. Une telle minuterie est ce produit douleur (une demande de fonctionnalité) pour réagir en natif, vous pouvez en invoquer à nouveau le processus pour indiquer une demande accrue de cette fonctionnalité.

EDIT 12/2016: Il n'y a toujours pas d'option réelle. Vous avez l'API Headless JS depuis RN 0.33, mais ce n'est que pour Android. De plus, votre application se bloquera si elle est affichée à l'avant-plan. Vous devez donc être prudent avant de l'utiliser. Merci à @Feng pour l'avoir signalé.

51
Daniel Schmidt

Et maintenant, il existe react-native-background-task , une API unique pour Android et iOS.

21
Matthew Wilcoxson

L’écosystème natif React évolue à un rythme effréné au cours des derniers mois et quelques plugins sont apparus pour faire face à la difficulté de pouvoir exécuter du code en arrière-plan.

https://github.com/transistorsoft/react-native-background-fetch - Réveillez-vous périodiquement pendant 30 secondes pour exécuter du code JS arbitraire. Ne convient pas à la géolocalisation haute résolution, car le délai entre les réveils sera de 15 minutes ou plus.

https://github.com/transistorsoft/react-native-background-geolocation - Un meilleur ajustement pour cette situation, ciblant spécifiquement la géolocalisation en arrière-plan.

10
frontendloader

J'utilise ceci et cela semble fonctionner: https://github.com/ocetnik/react-native-background-timer

Émettre des événements périodiquement (même lorsque l'application est en arrière-plan).

Vous pouvez utiliser les fonctions setInterval et setTimeout. Cette API est identique à celle de react-native et peut être utilisée pour remplacer rapidement des timers existants par des timers en arrière-plan.

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

Ces bibliothèques peuvent vous aider à atteindre les fonctionnalités souhaitées:

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

Vous pouvez également utiliser Headless JS à partir de react-native. Mais ce n'est disponible que pour Android.

6
Provash Shoumma