React Native调用Android原生模块PlugPag编译报错求助

核心问题分析 #

编译报错的根源是Java代码缺少完整的类结构，所有方法直接暴露在类外部，不符合Java语法规范。同时存在Lambda表达式未闭合、缺失必要导入、未定义变量等语法错误。

修复步骤 #

1. Java代码修复 #

需要将代码包裹在继承ReactContextBaseJavaModule的类中，补充必要导入、修正语法错误、清理未定义变量：

• 补全类定义，通过getName()方法指定Native模块名称（对应JS中NativeModules.PlugPag的调用）
• 通过构造函数初始化reactContext成员变量
• 闭合setEventListener的Lambda表达式
• 移除未定义的error.invoke()调用，统一用事件通知JS层
• 补充PlugPag相关类、日志、事件发射器的必要导入

2. App.js修复 #

onPress={payment()}会在组件渲染时立即执行支付方法，改为传递函数引用onPress={payment}，避免提前触发；同时添加事件监听接收Native层返回的支付结果。

修复后的完整代码 #

App.js #

import React from 'react';
import { NativeModules, Button, DeviceEventEmitter } from 'react-native';

const App = () => {
  // 监听Native发送的支付结果事件
  React.useEffect(() => {
    const successListener = DeviceEventEmitter.addListener('SuccessPayment', (transactionCode) => {
      console.log('支付成功，交易码：', transactionCode);
    });
    const errorListener = DeviceEventEmitter.addListener('ErrorPayment', (message) => {
      console.log('支付失败，错误信息：', message);
    });

    return () => {
      successListener.remove();
      errorListener.remove();
    };
  }, []);

  const payment = () => {
    NativeModules.PlugPag.doCreditPayment();
  };

  return (
    <Button
      title="测试支付"
      onPress={payment}
    />
  );
};

export default App;

Java代码（PlugPagModule.java） #

package com.myapp;

import android.util.Log;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.modules.core.DeviceEventManagerModule;
import br.com.uol.pagseguro.plugpag.PlugPag;
import br.com.uol.pagseguro.plugpag.PlugPagActivationData;
import br.com.uol.pagseguro.plugpag.PlugPagAppIdentification;
import br.com.uol.pagseguro.plugpag.PlugPagInitializationResult;
import br.com.uol.pagseguro.plugpag.PlugPagPaymentData;
import br.com.uol.pagseguro.plugpag.PlugPagTransactionResult;
import br.com.uol.pagseguro.plugpag.exception.IllegalViewOperationException;

public class PlugPagModule extends ReactContextBaseJavaModule {

    private final ReactApplicationContext reactContext;

    // 构造函数初始化上下文
    public PlugPagModule(ReactApplicationContext reactContext) {
        super(reactContext);
        this.reactContext = reactContext;
    }

    // 定义Native模块名称，对应JS中NativeModules.PlugPag
    @Override
    public String getName() {
        return "PlugPag";
    }

    @ReactMethod
    public void doCreditPayment() {
        try {
            // 构建支付数据
            PlugPagPaymentData paymentData = new PlugPagPaymentData(
                    PlugPag.TYPE_CREDITO,
                    110,
                    PlugPag.INSTALLMENT_TYPE_A_VISTA,
                    1,
                    "APPDEMO"
            );

            // 应用标识
            PlugPagAppIdentification appIdentification = new PlugPagAppIdentification("MeuApp", "1.0.7");

            // 初始化PlugPag实例
            PlugPag plugpag = new PlugPag(reactContext, appIdentification);

            // 激活PINPAD
            PlugPagInitializationResult result = plugpag.initializeAndActivatePinpad(
                    new PlugPagActivationData("403938")
            );

            if (result.getResult() == PlugPag.RET_OK) {
                // 设置事件监听器（闭合Lambda表达式）
                plugpag.setEventListener(plugPagEventData -> {
                    // 可在此处理设备事件
                    Log.i("PlugPag", "设备事件：" + plugPagEventData.getEventType());
                });

                // 执行支付
                PlugPagTransactionResult transResult = plugpag.doPayment(paymentData);

                if (transResult.getResult() == PlugPag.RET_OK) {
                    // 通知JS支付成功
                    emitDeviceEvent("SuccessPayment", transResult.getTransactionCode());
                } else {
                    // 通知JS支付失败
                    emitDeviceEvent("ErrorPayment", transResult.getMessage());
                }
            } else {
                // PINPAD初始化失败
                emitDeviceEvent("ErrorPayment", "PINPAD初始化失败：" + result.getMessage());
            }

        } catch (IllegalViewOperationException e) {
            // 布局异常
            emitDeviceEvent("ErrorPayment", "布局错误：" + e.getMessage());
            Log.e("PlugPag", "布局异常", e);
        } catch (Exception e) {
            // 其他未知异常
            emitDeviceEvent("ErrorPayment", "支付异常：" + e.getMessage());
            Log.e("PlugPag", "支付异常", e);
        }
    }

    // 向JS发送事件
    private void emitDeviceEvent(String eventName, String message) {
        Log.i("PlugPag", "发送事件：" + eventName + "，消息：" + message);
        reactContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
                .emit(eventName, message);
    }
}

额外步骤：注册Native模块 #

创建PlugPagPackage.java注册模块：

package com.myapp;

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;

public class PlugPagPackage implements ReactPackage {

    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>();
        modules.add(new PlugPagModule(reactContext));
        return modules;
    }

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

在MainApplication.java的getPackages()方法中添加模块包：

@Override
protected List<ReactPackage> getPackages() {
    @SuppressWarnings("UnnecessaryLocalVariable")
    List<ReactPackage> packages = new PackageList(this).getPackages();
    // 添加自定义模块包
    packages.add(new PlugPagPackage());
    return packages;
}

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