支付宝支付集成，按照支付宝官方的教程，一步一步走下去就可以了……，刚刚测试可用，在此做个记录,由于内容较多，android和Ios分开写了……
android 教程
ios 教程
sdk 下载

一、Android 使用方法

1. 下载并解压sdk，如下图

解压后的sdk

2.将解压后的sdk放到项目中

在项目的android/app/中新建libs/文件夹，将sdk复制进去

image.png

3.在android/app/build.gradle中添加下面内容；

dependencies {
    ......
    compile files('libs/alipaySdk-20170725.jar')
    ......
}

image.png

4.修改Manifest

• 在Android/app/src/main/AndroidMainifest.xml中添加如下内容：

<activity
    android:name="com.alipay.sdk.app.H5PayActivity"
    android:configChanges="orientation|keyboardHidden|navigation|screenSize"
    android:exported="false"
    android:screenOrientation="behind"
    android:windowSoftInputMode="adjustResize|stateHidden" >
</activity>
 <activity
    android:name="com.alipay.sdk.app.H5AuthActivity"
    android:configChanges="orientation|keyboardHidden|navigation"
    android:exported="false"
    android:screenOrientation="behind"
    android:windowSoftInputMode="adjustResize|stateHidden" >
</activity>

image.png

• 添加权限
  还是在Manifest文件中修改，查看如下权限是否已经存在，没有的话就加上。

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

image.png

5.添加混淆规则

在Android/app/proguard-rules.pro中添加如下内容：

-keep class com.alipay.android.app.IAlixPay{*;}
-keep class com.alipay.android.app.IAlixPay$Stub{*;}
-keep class com.alipay.android.app.IRemoteServiceCallback{*;}
-keep class com.alipay.android.app.IRemoteServiceCallback$Stub{*;}
-keep class com.alipay.sdk.app.PayTask{ public *;}
-keep class com.alipay.sdk.app.AuthTask{ public *;}
-keep class com.alipay.sdk.app.H5PayCallback {
    <fields>;
    <methods>;
}
-keep class com.alipay.android.phone.mrpc.core.** { *; }
-keep class com.alipay.apmobilesecuritysdk.** { *; }
-keep class com.alipay.mobile.framework.service.annotation.** { *; }
-keep class com.alipay.mobilesecuritysdk.face.** { *; }
-keep class com.alipay.tscenter.biz.rpc.** { *; }
-keep class org.json.alipay.** { *; }
-keep class com.alipay.tscenter.** { *; }
-keep class com.ta.utdid2.** { *;}
-keep class com.ut.device.** { *;}

image.png

6.目前为止，Android sdk集成完毕，接下来就是封装原生的方法，可以在react-native中调用（这里全靠百度,实在不会写Android原生）

在android/app/src/main/java/com/你的项目名/中新建一个alipay的文件夹，添加AlipayModule.java和AlipayPackage.java两个文件，如下图：

image.png

AlipayModule.java中内容：

package com.testurl.alipay;//这里testurl是我`java/com/`下的文件名

import com.alipay.sdk.app.PayTask;
import com.facebook.react.bridge.Arguments;
import com.facebook.react.bridge.Promise;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.bridge.WritableMap;

import java.util.Map;

public class AlipayModule extends ReactContextBaseJavaModule {

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

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

    @ReactMethod
    public void pay(final String orderInfo, final Promise promise) {
        Runnable payRunnable = new Runnable() {
            @Override
            public void run() {
                WritableMap map = Arguments.createMap();
                PayTask alipay = new PayTask(getCurrentActivity());
                Map<String, String> result = alipay.payV2(orderInfo, true);
                for (Map.Entry<String, String> entry : result.entrySet())
                    map.putString(entry.getKey(), entry.getValue());
                promise.resolve(map);
            }
        };
        // 必须异步调用
        Thread payThread = new Thread(payRunnable);
        payThread.start();
    }

}

AlipayPackage.java中的内容：

package com.testurl.alipay;//这里testurl是我`java/com/`下的文件名

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 AlipayPackage implements ReactPackage {

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

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

}

在MainApplication.java中注册

image.png

7.在react-native中封装js,方便调用

添加两句，方便以后的使用

import { NativeModules } from 'react-native';
export default NativeModules.Alipay;

image.png

8. 调用方法，发起支付

如图所示，我在这里直接写死了从后端接口拿到的订单信息，正常的应该是先调用接口从后台获取到data,然后在Alipay.pay(data)使用，然后就能调起支付宝，返回信息都在ret中，后期如何处理就不说了。

image.png

最后看看成果：

image.png