React Native 查看后台应用：全方位指南

javascript

2024-03-10 23:21:09

在开发社交类或游戏应用时，有时需要查看用户当前运行的应用列表，以便执行如自动更新在线状态等功能。这篇文章将提供两种实现方法，一种是利用原生模块，另一种是自定义实现。每种方法都会详细介绍步骤、代码示例，并给出常见问题的解答。

使用原生模块

iOS 方法

在 iOS 平台上，可以利用 NSWorkspace 和 NSRunningApplication 类获取正在运行的应用列表。

步骤：

创建一个原生模块来访问这些类。
在 React Native 应用中调用该模块方法以获取应用列表信息。

示例代码

在 iOS 项目中，创建一个新的 Swift 文件，并实现如下功能：

import Foundation
@objc(BackgroundAppsModule)
class BackgroundAppsModule: NSObject {
    @objc func getRunningApplications(_ resolver resolve: RCTPromiseResolveBlock, rejecter reject: RCTPromiseRejectBlock) -> Void {
        let workspace = NSWorkspace.shared
        if let apps = workspace.runningApplications {
            var appNames: [String] = []
            for app in apps {
                if !app.isHiddenProcess {
                    appNames.append(app.localizedName ?? "Unknown")
                }
            }
            resolve(appNames)
        } else {
            reject("E_ERROR", "Failed to retrieve running applications.", nil)
        }
    }

    @objc static func requiresMainQueueSetup() -> Bool {
        return true
    }
}

在 AppDelegate.swift 中注册该模块：

import UIKit
import React

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {

  var window: UIWindow?

  func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey : Any]? = nil) -> Bool {
    let moduleName = "BackgroundAppsModule"
    RCTBridge.setCustomDirectModules([moduleName])
    return true
  }
}

在 JavaScript 中调用模块：

import {NativeModules} from 'react-native';

const getRunningApps = async () => {
  try {
    const apps = await NativeModules.BackgroundAppsModule.getRunningApplications();
    console.log('Running Applications:', apps);
  } catch (error) {
    console.error('Failed to retrieve running applications:', error);
  }
};

getRunningApps();

Android 方法

在 Android 平台上，可通过调用 ActivityManager 类来获取正在运行的应用列表。

步骤：

创建一个原生模块并实现获取应用列表的功能。
在 React Native 应用中调用该模块方法以获得应用信息。

示例代码

新建 Java 文件：

package com.yourapp;

import android.app.ActivityManager;
import android.content.Context;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.bridge.Promise;

public class BackgroundAppsModule extends ReactContextBaseJavaModule {

    public BackgroundAppsModule(ReactApplicationContext reactContext) {
        super(reactContext);
    }

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

    @ReactMethod
    public void getRunningApplications(Promise promise) {
        ActivityManager activityManager = (ActivityManager) getReactApplicationContext().getSystemService(Context.ACTIVITY_SERVICE);
        List<ActivityManager.RunningAppProcessInfo> runningProcesses = activityManager.getRunningAppProcesses();

        if (runningProcesses != null) {
            ArrayList<String> processNames = new ArrayList<>();
            for (ActivityManager.RunningAppProcessInfo info : runningProcesses) {
                processNames.add(info.processName);
            }
            promise.resolve(processNames);
        } else {
            promise.reject("E_ERROR", "Failed to retrieve running applications.");
        }
    }
}

在 MainApplication.java 中注册模块：

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import java.util.Arrays;
import java.util.Collections;
import java.util.List;

public class MainApplication extends Application implements ReactApplication {
    // ... 省略其他代码

    @Override
    protected List<ReactPackage> getPackages() {
        return Arrays.<ReactPackage>asList(
                new MainReactPackage(),
                new ReactModuleRegistryAdapter(this)
                );
    }

    private static class BackgroundAppsPackage implements ReactPackage {
        @Override
        public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
            return Collections.singletonList(new BackgroundAppsModule(reactContext));
        }
    }
}

在 JavaScript 中调用模块：

import {NativeModules} from 'react-native';

const getRunningApps = async () => {
  try {
    const apps = await NativeModules.BackgroundAppsModule.getRunningApplications();
    console.log('Running Applications:', apps);
  } catch (error) {
    console.error('Failed to retrieve running applications:', error);
  }
};

getRunningApps();