基于React Native Expo查询设备已安装包名的方案咨询

一、维护中的第三方库方案 #

目前有一款持续维护的库react-native-device-info支持检测应用是否安装，它同时兼容Android（包名）和iOS（Bundle ID），使用步骤如下：

• 安装依赖：

  npm install react-native-device-info
  # 或使用yarn
  yarn add react-native-device-info
  

• Expo项目配置：
  如果是纯Managed Workflow项目，需先执行预构建生成原生目录：

  npx expo prebuild
  

• 代码示例：

  import DeviceInfo from 'react-native-device-info';
  
  // 检测指定包名的应用是否安装
  async function checkAppInstallation(packageName) {
    try {
      const isInstalled = await DeviceInfo.isPackageInstalled(packageName);
      console.log(`应用状态：${isInstalled ? '已安装' : '未安装'}`);
      return isInstalled;
    } catch (error) {
      console.error('检测失败：', error);
      return false;
    }
  }
  
  // 调用示例（以微信Android包名为例）
  checkAppInstallation('com.tencent.mm');
  

二、集成自定义原生代码到Expo项目的步骤 #

如果你已有现成的原生检测代码，可按以下步骤集成到Expo项目（以Android为例，iOS流程类似）：

前置准备 #

确保项目已执行过npx expo prebuild，生成了android原生目录（纯Managed项目需先执行此命令切换到预构建模式）。

1. 放置原生检测代码 #

将你编写的Android检测类（如AppInstallChecker.kt）放到android/app/src/main/java/[你的项目包名]/目录下，示例代码：

package com.yourprojectname; // 替换为你的项目包名

import android.content.Context;
import android.content.pm.PackageManager;

class AppInstallChecker(private val context: Context) {
    fun isAppInstalled(packageName: String): Boolean {
        return try {
            // 尝试获取包信息，不存在则抛出异常
            context.packageManager.getPackageInfo(packageName, PackageManager.GET_ACTIVITIES)
            true
        } catch (e: PackageManager.NameNotFoundException) {
            false
        }
    }
}

2. 编写React Native桥接模块 #

创建桥接类AppInstallModule.kt，用于JS与原生代码通信：

package com.yourprojectname;

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

class AppInstallModule(reactContext: ReactApplicationContext) : ReactContextBaseJavaModule(reactContext) {
    private val checker = AppInstallChecker(reactContext)

    // 模块名称，JS层将通过此名称调用
    override fun getName(): String {
        return "AppInstallChecker"
    }

    // 暴露给JS的异步方法
    @ReactMethod
    fun isAppInstalled(packageName: String, promise: Promise) {
        try {
            val result = checker.isAppInstalled(packageName)
            promise.resolve(result)
        } catch (e: Exception) {
            promise.reject("DETECT_ERROR", "检测应用安装状态失败", e)
        }
    }
}

3. 注册桥接模块 #

创建AppInstallPackage.kt，将模块注册到React Native：

package com.yourprojectname;

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;
import java.util.ArrayList;
import java.util.Collections;
import java.util.List;

class AppInstallPackage : ReactPackage {
    override fun createNativeModules(reactContext: ReactApplicationContext): List<NativeModule> {
        val modules = ArrayList<NativeModule>()
        modules.add(AppInstallModule(reactContext))
        return modules
    }

    override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> {
        return Collections.emptyList()
    }
}

4. 在MainApplication中注册Package #

打开android/app/src/main/java/[你的项目包名]/MainApplication.kt，在getPackages()方法中添加自定义Package：

override fun getPackages(): List<ReactPackage> {
    val packages = PackageList(this).packages.apply {
        // 添加自定义包
        add(AppInstallPackage())
    }
    return packages
}

5. JS层调用原生模块 #

创建工具类封装调用逻辑：

import { NativeModules } from 'react-native';

// 获取原生模块实例
const { AppInstallChecker } = NativeModules;

export const checkAppInstalled = async (packageName) => {
  try {
    return await AppInstallChecker.isAppInstalled(packageName);
  } catch (error) {
    console.error('检测错误：', error);
    return false;
  }
};

// 调用示例
// checkAppInstalled('com.tencent.mm').then(isInstalled => console.log(isInstalled));

6. 构建运行项目 #

执行以下命令构建并启动Android应用：

npx expo run:android

内容的提问来源于stack exchange，提问作者Bloom Flora