使用 Android 的 Expo React-native：如何在后台運行應用程序？

Question

是否有其他方法或技巧可以使用 android 在后台運行 expo 應用程序？ 我一直在尋找幾天尋找答案。 有答案，但對初學者來說很復雜，我正在創建一個應用程序，每 5 秒跟蹤一次用戶的位置，並使用 node.js 將位置發送到服務器。 它工作正常，我唯一的問題是當我的應用程序在后台停止向服務器發送數據時。

應用程序.js

import React, { Component } from 'react';
import { 
  Text, 
  View, 
  StyleSheet,
  Dimensions
} from 'react-native';


import { BackgroundFetch, TaskManager } from 'expo';



import MapView from 'react-native-maps';
import {Marker} from 'react-native-maps'

export default class App extends Component {
  state = {
    mapRegion: null,
    hasLocationPermissions: false,
    locationResult: null,
    marker: {
      latitude: 0,
      longitude: 0
    },
    latitude: 0,
    longitude: 0,
    location: null,
    errorMessage: null
  };






  componentDidMount() {
    //var handle = Interaction

    this.getBackgroundStat()
    this.watchCurLocation();
  }



  getBackgroundStat = async () =>{
    const test = await BackgroundFetch.getStatusAsync({});
    console.log(test)
  }

  watchCurLocation = () =>
    setTimeout(() => {
      this.watchCurLocation();
    }, 5000);
  }

  getLocationAsync = async () => {
    const { status } = await Permissions.askAsync(Permissions.LOCATION);

    if (status !== 'granted') {
      this.setState({
        errorMessage: 'Permission to access location was denied',
      });
      return;
    }

    const location = await Location.getCurrentPositionAsync({});
    console.log(location)
    this.setState({ location });
  };



  getCurrentLocation = () =>
    navigator.geolocation.getCurrentPosition(
      (position) => {
          let currentUserPosition = position.coords;
          //alert(JSON.stringify(currentUserPosition));
      },
      (error) => {
          console.log(error);
      },
      {
          enableHighAccuracy: true,
          timeout: 2000,
          maximumAge: 0,
          distanceFilter: 1
      }
  );

  _handleMapRegionChange = mapRegion => {
    //console.log(mapRegion);
    this.setState({ mapRegion });
  };

  _watchLocationAsync = async () =>{
    let watchlocation = Location.watchPositionAsync({enableHighAccuracy:true,timeInterval:4000, distanceInterval:0}, (pos)=>{
      console.log(pos)
      return pos
    });
    return watchlocation
  }

  _getLocationAsync = async () => {
    let { status } = await Permissions.askAsync(Permissions.LOCATION);
    if (status !== 'granted') {
      this.setState({
        locationResult: 'Permission to access location was denied',
      });
    } else {
      this.setState({ hasLocationPermissions: true });
    }

    let location = await Location.getCurrentPositionAsync({});

    let marker = Object.assign({}, this.state.marker)
    marker.latitude = location.coords.latitude
    marker.longitude = location.coords.longitude

    this.setState({ locationResult: JSON.stringify(location) });
    this.setState({marker})

    // Center the map on the location we just fetched.
    this.setState({ mapRegion: { latitude: location.coords.latitude, longitude: location.coords.longitude, latitudeDelta: 0.0922, longitudeDelta: 0.0421 } });
  };

  componentWillUnmount(){
    navigator.geolocation.clearWatch(this.watchId);
  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.paragraph}>
          Pan, zoom, and tap on the map!
        </Text>

        {
          this.state.locationResult === null ?
            <Text>Finding your current location...</Text> :
            this.state.hasLocationPermissions === false ?
              <Text>Location permissions are not granted.</Text> :
              this.state.mapRegion === null ?
                <Text>Map region doesn't exist.</Text> :
                <MapView
                  style={{ alignSelf: 'stretch', height: 400 }}
                  initialRegion={this.state.mapRegion}
                  onRegionChange={this._handleMapRegionChange}
                >
                  <MapView.Marker
                    coordinate={this.state.marker}
                    title="GpS locator"
                    description="My current location"
                  >
                  </MapView.Marker>
                </MapView>     
        }

        <Text>
          Location: {this.state.locationResult}
          {"\n\n"}
          MyOwnLocation: {this.state.latitude} {"\n\n"}
          MyOwnLocation2: {this.state.longitude}
        </Text>
      </View>

    );
  }
}