Expo React-native使用Android：如何在后台运行应用程序？

Question

有没有替代方法或技巧在后台使用Android运行expo应用程序？我一直在寻找几天寻找答案。有答案，但对初学者来说很复杂，我正在创建一个应用程序，每隔5秒跟踪用户的位置，并使用节点将位置发送到服务器。它的工作正常，我唯一的问题是它在后台我的应用程序停止向服务器发送数据。

App.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>

    );
  }
}

Answer 1

Expo SDK 32刚刚发布，具有后台任务支持，包括位置跟踪。

关于它的博客文章：https://blog.expo.io/expo-sdk-v32-0-0-is-now-available-6b78f92a6c52

和文档在这里：https://docs.expo.io/versions/v32.0.0/sdk/task-manager https://docs.expo.io/versions/v32.0.0/sdk/location

你会发现这个例子很有帮助。 https://twitter.com/r13127igOr/status/1082761408905920512

Answer 2

我正在使用react-native-background-task，它工作正常。它适用于IOS和Android。你看了吗？

https://www.npmjs.com/package/react-native-background-task