使用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=\"asdfasdf@qq.com\"&out_trade_no=\"ALIPAY15307684880120000000001\"&subject=\"描述\"&body=\"在线支付\"&total_fee=\"0.01\"¬ify_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
image.png
3.编辑AppDelegate.m
image.png
