使用react-native-yunpeng-alipay完成android ，ios支付寶支付
程式碼地址 https://github.com/dai1254473705/react-native-alipay

一、android

1. 安裝 react-native-yunpeng-alipay 三方外掛

• windows: npm install react-native-yunpeng-alipay --save
• mac:yarn add react-native-yunpeng-alipay

2. link

react-native link react-native-yunpeng-alipay

3.解決報錯資訊（方法不會覆蓋或實現超型別）

在node_modules中，找到如下圖所示內容，註釋掉

image.png

4.呼叫方法

我是直接 react-native init的專案，然後直接在APP.js中做的，下面的是APP.js中所有的內容

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, {Component} from 'react';
import {
    Platform,
    StyleSheet,
    Text,
    TouchableOpacity,
    View
} from 'react-native';
import Alipay from 'react-native-yunpeng-alipay';


export default class App extends Component<{}> {
    _aliPay = () => {
        console.log("點選進行支付");
        let data = 'partner=\"asdfasdf\"&seller_id=\"
 
[email protected]\"&out_trade_no=\"ALIPAY15307684880120000000001\"&subject=\"描述\"&body=\"線上支付\"&total_fee=\"0.01\"&notify_url=\"http://xx.xx.xx.xx/api/0/alipay/alipayCallback\"&service=\"m.pay\"&payment_type=\"1\"&_input_charset=\"utf-8\"&it_b_pay=\"30m\"&sign=\sdfasdf\"&sign_type=\"RSA\"';
        Alipay.pay(data).then(function(data){
            console.log(data);
        }, function (err) {
            console.log(err);
        });
    }

    render() {
        return (
            <View style={styles.container}>
                <TouchableOpacity onPress={this._aliPay}>
                    <View style={styles.btn}>
                        <Text style={styles.text}>支付寶支付</Text>
                    </View>
                </TouchableOpacity>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
    btn: {
        width: 200,
        height: 30,
        backgroundColor: "#999",


    },
    text: {
        color: "#fff",
        textAlign: "center",
        lineHeight: 30
    }
});
 

5.android 支付結束了！！

二、ios

1. 新增模組

新增：
+CoreMotion.framework
+CoreTelephony.framework
+libc++
+libz

image.png

2. 設定URL Schema

3.編輯AppDelegate.m

4. 完成！

作者：我的暱稱好聽嗎
連結：https://www.jianshu.com/p/d4388eba45cf

關注「程式設計微刊」公眾號 ，在微信後臺回覆「領取資源」，獲取IT資源200G乾貨大全。