如何跨平台判断Capacitor.js+React应用是否处于开发模式？

针对基于Capacitor.js和原生React的iOS/Android应用，有两种可靠的跨平台方案可以检测应用当前处于开发模式还是生产模式：

方法一：原生桥接传递模式标志（推荐） #

通过Capacitor插件桥接原生端的模式状态，直接读取iOS的DEBUG宏和Android的可调试标志，结果更准确。

iOS端实现 #

在Xcode项目中新建Capacitor插件类：

import Capacitor

@objc(ModeDetectorPlugin)
class ModeDetectorPlugin: CAPPlugin {
    @objc func getAppMode(_ call: CAPPluginCall) {
        #if DEBUG
            call.resolve(["isDebug": true])
        #else
            call.resolve(["isDebug": false])
        #endif
    }
}

在capacitor.config.ts中注册插件：

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.your.app',
  appName: 'YourApp',
  webDir: 'build',
  bundledWebRuntime: false,
  plugins: {
    ModeDetectorPlugin: { enabled: true }
  }
};

export default config;

Android端实现 #

在Android项目中创建插件类：

import com.getcapacitor.Plugin;
import com.getcapacitor.PluginCall;
import com.getcapacitor.PluginMethod;
import com.getcapacitor.annotation.CapacitorPlugin;

@CapacitorPlugin(name = "ModeDetectorPlugin")
public class ModeDetectorPlugin extends Plugin {
    @PluginMethod()
    public void getAppMode(PluginCall call) {
        boolean isDebug = getContext().getApplicationInfo().flags & android.content.pm.ApplicationInfo.FLAG_DEBUGGABLE != 0;
        call.resolve(new org.json.JSONObject().put("isDebug", isDebug));
    }
}

React层调用 #

在React代码中异步获取模式状态：

import { Plugins } from '@capacitor/core';

const { ModeDetectorPlugin } = Plugins;

async function checkAppMode() {
  const { isDebug } = await ModeDetectorPlugin.getAppMode();
  console.log(isDebug ? "当前为开发模式" : "当前为生产模式");
  // 根据状态执行对应逻辑
}

方法二：构建环境变量匹配 #

通过React构建环境变量传递模式信息，需确保原生构建模式与React构建环境严格对应。

1. 在项目根目录创建.env.development和.env.production文件：

# .env.development
REACT_APP_IS_DEBUG=true

# .env.production
REACT_APP_IS_DEBUG=false

2. 在React代码中直接读取变量：

const isDebug = process.env.REACT_APP_IS_DEBUG === 'true';

注意事项 #

• 方法一直接读取原生运行状态，不受构建流程影响，适合对准确性要求高的场景。
• 方法二更简洁，但需要保证原生构建模式（iOS Debug/Release、Android debug/release）与React构建环境（development/production）完全匹配，否则会出现判断错误。

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