React Native 原生模块封装：从0到1打造支付宝支付

导言

React Native 是一款流行的跨平台移动应用开发框架，它允许您使用 JavaScript 构建可在 iOS 和 Android 上运行的原生应用。但是，React Native 本身并不提供所有您可能需要的功能，因此您可能需要使用原生模块来扩展其功能。

原生模块是使用平台特定语言（如 Java 或 Objective-C）编写的代码，可与 React Native 应用进行交互。您可以使用原生模块来访问设备的硬件功能（如摄像头或 GPS），或集成第三方库。

步骤 1：创建 React Native 项目

首先，您需要创建一个新的 React Native 项目。您可以使用以下命令来创建项目：

npx react-native init AlipayDemo

步骤 2：安装必要的依赖项

接下来，您需要安装必要的依赖项。您可以使用以下命令来安装依赖项：

cd AlipayDemo
npm install react-native-支付宝

步骤 3：创建原生模块

接下来，您需要创建原生模块。您可以使用以下命令来创建原生模块：

cd android
./gradlew generateAlipayReleaseAar

cd ios
pod install

步骤 4：集成原生模块

现在，您需要将原生模块集成到您的 React Native 项目中。您可以通过在 MainApplication.java 或 AppDelegate.m 文件中注册模块来做到这一点。

步骤 5：使用原生模块

最后，您就可以在您的 React Native 应用中使用原生模块了。您可以通过使用 require() 函数来导入模块，然后使用模块提供的 API 来调用原生代码。

示例代码

以下是一个完整的示例代码，展示了如何使用 React Native 原生模块封装支付宝支付功能：

Android

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

public class AlipayModule extends ReactContextBaseJavaModule {

  private static final String REACT_MODULE = "Alipay";

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

  @Override
  public String getName() {
    return REACT_MODULE;
  }

  @ReactMethod
  public void pay(String orderInfo, Callback callback) {
    // 调用支付宝 SDK 进行支付
    AlipaySDK.createFromBundle(getReactApplicationContext()).pay(orderInfo, new AlipayResultListener() {
      @Override
      public void onSuccess() {
        callback.invoke("支付成功");
      }

      @Override
      public void onCancel() {
        callback.invoke("支付取消");
      }

      @Override
      public void onError(int code, String message) {
        callback.invoke("支付失败", message);
      }
    });
  }
}

iOS

#import <React/RCTBridgeModule.h>

@interface AlipayModule : NSObject <RCTBridgeModule>

@end

@implementation AlipayModule

RCT_EXPORT_MODULE();

RCT_EXPORT_METHOD(pay:(NSString *)orderInfo resolver:(RCTPromiseResolveBlock)resolver rejecter:(RCTPromiseRejectBlock)rejecter)
{
  // 调用支付宝 SDK 进行支付
  [[AlipaySDK defaultService] payOrder:orderInfo fromScheme:@"alisdkdemo" callback:^(NSDictionary *result) {
    if (result[@"resultStatus"] == @"9000") {
      resolver(@