如何在React Native Headless JS中实现定时定位日志输出

Hey there! Let's figure out why your headless task isn't producing output and get that periodic location tracking working properly. Here's a step-by-step breakdown of what you might be missing and how to fix it:

You’ve registered the task, but if your TimeTracking JS module doesn’t include code to fetch the location and log it, you won’t see any output. Let’s add that using a reliable geolocation library (I recommend react-native-geolocation-service since it’s maintained and handles edge cases well):

First, install the library:

npm install react-native-geolocation-service

Then create a TimeTracking.js file with the actual location-fetching logic:

import Geolocation from 'react-native-geolocation-service';

const TimeTracking = async (taskData) => {
  try {
    console.log('Starting location fetch...');
    Geolocation.getCurrentPosition(
      (pos) => {
        console.log('Location retrieved:', pos.coords.latitude, pos.coords.longitude);
      },
      (error) => {
        console.error('Location error:', error.message);
      },
      {
        enableHighAccuracy: true,
        timeout: 15000,
        maximumAge: 10000,
        distanceFilter: 0
      }
    );
  } catch (err) {
    console.error('Task execution error:', err);
  }
};

export default TimeTracking;

Make sure you import this correctly in app.js when registering:

import TimeTracking from './TimeTracking';
import { AppRegistry } from 'react-native';
// ... your other app initialization code

AppRegistry.registerHeadlessTask('TimeTracking', () => TimeTracking);

Adding permissions to the Manifest isn’t enough for Android 6.0 (API 23)+. You need to request them at runtime—especially background location access (required for Android 10+ if tracking when the app is in the background):

Use react-native-permissions to handle runtime requests:

npm install react-native-permissions

Add this permission-request logic in your app’s entry point or a settings screen:

import { PermissionsAndroid, Platform } from 'react-native';

const requestLocationPermissions = async () => {
  if (Platform.OS === 'android') {
    const permissions = [
      PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
      // Request background location for Android 10+
      ...(Platform.Version >= 29 ? [PermissionsAndroid.PERMISSIONS.ACCESS_BACKGROUND_LOCATION] : [])
    ];

    const granted = await PermissionsAndroid.requestMultiple(permissions);
    const fineLocationGranted = granted[PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION] === PermissionsAndroid.RESULTS.GRANTED;
    const backgroundGranted = Platform.Version <29 || granted[PermissionsAndroid.PERMISSIONS.ACCESS_BACKGROUND_LOCATION] === PermissionsAndroid.RESULTS.GRANTED;

    if (!fineLocationGranted || !backgroundGranted) {
      console.error('Required location permissions not granted');
      return false;
    }
    return true;
  }
  // Handle iOS permissions if needed
  return true;
};

// Call this when your app starts
requestLocationPermissions();

Headless JS tasks don’t run automatically on a schedule—you need to use Android’s AlarmManager to trigger your TimeTracking service periodically. Here’s how to set that up:

Step 3.1: Create a Broadcast Receiver #

Create a new Java file LocationAlarmReceiver.java in com.timetracking:

package com.timetracking;

import android.content.BroadcastReceiver;
import android.content.Context;
import android.content.Intent;

public class LocationAlarmReceiver extends BroadcastReceiver {
    @Override
    public void onReceive(Context context, Intent intent) {
        // Start the headless service
        Intent serviceIntent = new Intent(context, TimeTracking.class);
        context.startForegroundService(serviceIntent); // Use this for Android 8.0+
    }
}

Step 3.2: Register the Receiver in AndroidManifest.xml #

Add this inside the <application> tag:

<receiver android:name=".LocationAlarmReceiver" android:exported="false" />

Step 3.3: Create a Native Module to Schedule the Alarm #

Create LocationSchedulerModule.java to expose scheduling methods to React Native:

package com.timetracking;

import android.app.AlarmManager;
import android.app.PendingIntent;
import android.content.Context;
import android.content.Intent;
import android.os.Build;

import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;

import java.util.Calendar;

public class LocationSchedulerModule extends ReactContextBaseJavaModule {
    private static ReactApplicationContext reactContext;
    private AlarmManager alarmManager;
    private PendingIntent pendingIntent;

    public LocationSchedulerModule(ReactApplicationContext context) {
        super(context);
        reactContext = context;
        alarmManager = (AlarmManager) context.getSystemService(Context.ALARM_SERVICE);
        Intent intent = new Intent(context, LocationAlarmReceiver.class);
        pendingIntent = PendingIntent.getBroadcast(context, 0, intent, PendingIntent.FLAG_IMMUTABLE | PendingIntent.FLAG_UPDATE_CURRENT);
    }

    @Override
    public String getName() {
        return "LocationScheduler";
    }

    @ReactMethod
    public void schedulePeriodicTracking(long intervalMillis) {
        Calendar calendar = Calendar.getInstance();
        calendar.setTimeInMillis(System.currentTimeMillis());
        calendar.add(Calendar.MILLISECOND, 1000); // Start after 1 second

        // Use exact alarm for reliable periodic triggers (Android 6.0+)
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
            alarmManager.setExactAndAllowWhileIdle(AlarmManager.RTC_WAKEUP, calendar.getTimeInMillis(), pendingIntent);
        } else if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            alarmManager.setExact(AlarmManager.RTC_WAKEUP, calendar.getTimeInMillis(), pendingIntent);
        } else {
            alarmManager.setRepeating(AlarmManager.RTC_WAKEUP, calendar.getTimeInMillis(), intervalMillis, pendingIntent);
        }
    }

    @ReactMethod
    public void stopTracking() {
        if (alarmManager != null && pendingIntent != null) {
            alarmManager.cancel(pendingIntent);
        }
    }
}

Register this module in MainApplication.java:

// ... existing imports
import com.timetracking.LocationSchedulerModule;
import java.util.Arrays;
import java.util.Collections;
import java.util.List;

@Override
protected List<ReactPackage> getPackages() {
    List<ReactPackage> packages = new PackageList(this).getPackages();
    packages.add(new ReactPackage() {
        @Override
        public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
            return Arrays.asList(new LocationSchedulerModule(reactContext));
        }

        @Override
        public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
            return Collections.emptyList();
        }
    });
    return packages;
}

Step 3.4: Trigger the Scheduler from React Native #

After granting permissions, call the scheduler to start periodic tracking:

import { NativeModules } from 'react-native';

// Schedule tracking every 5 minutes (300000 milliseconds)
NativeModules.LocationScheduler.schedulePeriodicTracking(300000);

// To stop tracking later:
// NativeModules.LocationScheduler.stopTracking();

Android 8.0+ limits background services, so your TimeTracking service needs to run as a foreground service to avoid being killed. Update your TimeTracking.java to show a persistent notification:

package com.timetracking;
import android.app.Notification;
import android.app.NotificationChannel;
import android.app.NotificationManager;
import android.content.Intent;
import android.os.Build;
import android.os.Bundle;
import com.facebook.react.HeadlessJsTaskService;
import com.facebook.react.bridge.Arguments;
import com.facebook.react.jstasks.HeadlessJsTaskConfig;
import javax.annotation.Nullable;

public class TimeTracking extends HeadlessJsTaskService {
    private static final String CHANNEL_ID = "TimeTrackingChannel";
    private static final int NOTIFICATION_ID = 12345;

    @Override
    public void onCreate() {
        super.onCreate();
        createNotificationChannel();
    }

    private void createNotificationChannel() {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
            NotificationChannel serviceChannel = new NotificationChannel(
                    CHANNEL_ID,
                    "Time Tracking Service",
                    NotificationManager.IMPORTANCE_LOW
            );
            NotificationManager manager = getSystemService(NotificationManager.class);
            manager.createNotificationChannel(serviceChannel);
        }
    }

    @Override
    protected @Nullable HeadlessJsTaskConfig getTaskConfig(Intent intent) {
        // Start foreground service with a notification
        Notification notification = new Notification.Builder(this, CHANNEL_ID)
                .setContentTitle("Tracking Location")
                .setContentText("Collecting location data")
                .setSmallIcon(R.mipmap.ic_launcher) // Replace with your app's icon
                .build();

        startForeground(NOTIFICATION_ID, notification);

        Bundle extras = intent.getExtras();
        WritableMap data = extras != null ? Arguments.fromBundle(extras) : null;
        return new HeadlessJsTaskConfig(
                "TimeTracking",
                data,
                500,
                true);
    }

    @Override
    public void onDestroy() {
        super.onDestroy();
        stopForeground(true);
    }
}

• Manually trigger the service: Use ADB to test if the task runs:

  adb shell am startservice -n com.timetracking/.TimeTracking
  

• Check logs: View React Native logs to see output:

  npx react-native log-android
  

• Inspect system logs: Look for permission or service errors:

  adb logcat *:S ReactNative:V ReactNativeJS:V
  

Once all these steps are in place, your app should periodically fetch location data and log it to the console even when in the background.

内容的提问来源于stack exchange，提问作者Tripti Pant