功能：

通過微信SDK(v1.8.2)實(shí)現(xiàn)微信支付功能

使用步驟：

一、鏈接WXPay庫

參考：https://reactnative.cn/docs/0.50/linking-libraries-ios.html#content

手動添加：

1、添加react-native-wxpay插件到你工程的node_modules文件夾下
2、添加WXPay庫中的.xcodeproj文件在你的工程中
3、點(diǎn)擊你的主工程文件，選擇Build Phases，然后把剛才所添加進(jìn)去的.xcodeproj下的Products文件夾中的靜態(tài)庫文件（.a文件），拖到Link Binary With Libraries組內(nèi)。

自動添加：

npm install react-native-wxpay --save 
或
yarn add react-native-wxpay

react-native link

由于AppDelegate中使用WXPay庫，所以我們需要打開你的工程文件，選擇Build Settings，然后搜索Header Search Paths，然后添加庫所在的目錄 $(SRCROOT)/../node_modules/react-native-wxpay/ios/WXPay

二、開發(fā)環(huán)境配置

參考：https://open.weixin.qq.com/cgi-bin/showdocument?action=dir_list&t=resource/res_list&verify=1&id=1417694084&token=&lang=zh_CN

1、引入系統(tǒng)庫

左側(cè)目錄中選中工程名，在TARGETS->Build Phases-> Link Binary With Libaries中點(diǎn)擊“+”按鈕，在彈出的窗口中查找并選擇如下所需的庫，單擊“Add”按鈕，將庫文件添加到工程中。

• SystemConfiguration.framework
• libz.dylib
• libsqlite3.0.dylib
• libc++.dylib
• Security.framework
• CoreTelephony.framework
• CFNetwork.framework

如圖所示：

2、環(huán)境配置

在Xcode中，選擇你的工程設(shè)置項(xiàng)，選中“TARGETS”一欄，在“info”標(biāo)簽欄的“URL type”添加“URL scheme”為你所注冊的應(yīng)用程序id

在工程文件中選擇Build Setting，在"Other Linker Flags"中加入"-Objc -all_load"

三、配置plist文件

在iOS9中為了能正常調(diào)起微信支付的功能，必須在"Info.plist"中將微信的URL scheme列為白名單，否則無法調(diào)起，配置如下：

<key>LSApplicationQueriesSchemes</key>
<array>
    <string>weixin</string>
</array>

四、簡單使用

方法

1、重寫AppDelegate的openURL方法：

#import "WXPay.h"

- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation
{
  if ([sourceApplication isEqualToString:@"com.tencent.xin"]) {
    return [[WXPay shareInstance] handleOpenURL: url];
  }else{
    return NO;
  }
}


// NOTE: 9.0以后使用新API接口
- (BOOL)application:(UIApplication *)app openURL:(NSURL *)url options:(NSDictionary<NSString*, id> *)options
{
  if ([options[@"UIApplicationOpenURLOptionsSourceApplicationKey"]  isEqualToString:@"com.tencent.xin"]) {
    return [[WXPay shareInstance] handleOpenURL: url];
  }else{
    return NO;
  }
}

2、js文件

//index.ios.js
import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Dimensions,
  AlertIOS,
  ScrollView,
  TouchableHighlight,
  NativeAppEventEmitter
} from 'react-native';

import WXPay from 'react-native-wxpay';

let appid = 'wxd930ea5d5a258f4f';

function show(title, msg) {
    AlertIOS.alert(title+'', msg+'');
}

export default class TextReactNative extends Component {
  componentDidMount() {
        this.registerApp();
        NativeAppEventEmitter.addListener(
            'finishedPay',
            (response) => {
                if (parseInt(response.errCode) === 0) {
                    alert('支付成功');
                }else if (parseInt(response.errCode) === -2){
                    alert('用戶取消');
                } else {
                    alert(response.strMsg);
                }
            }
        );
    }
    registerApp() {
        WXPay.registerApp(appid, (res) => {
            show('registerApp', res);
        });
    }
    isWXAppInstalled() {
        WXPay.isWXAppInstalled((res) => {
            show('isWXAppInstalled', res);
        });
    }
    isWXAppSupportApi() {
        WXPay.isWXAppSupportApi((res) => {
            show('isWXAppSupportApi', res);
        });
    }
    wechatPay() {
        WXPay.pay({
            'timestamp': '1412000000',
            'partnerid': '1900000109',
            'prepayid': 'WX1217752501201407033233368018',
            'noncestr': '5K8264ILTKCH16CQ2502SI8ZNMTM67VS',
            'package': 'Sign=WXPay',
            'sign': 'C380BEC2BFD727A4B6845133519F3AD6'
        },(res) => {
            
        });
    }
    render() {
        return (
            <ScrollView contentContainerStyle={styles.wrapper}>
                
                <Text style={styles.pageTitle}>WeChat SDK for React Native (iOS)</Text>

                <TouchableHighlight 
                    style={styles.button} underlayColor="#f38"
                    onPress={this.registerApp}>
                    <Text style={styles.buttonTitle}>registerApp</Text>
                </TouchableHighlight>
                
                <TouchableHighlight 
                    style={styles.button} underlayColor="#f38"
                    onPress={this.isWXAppInstalled}>
                    <Text style={styles.buttonTitle}>isWXAppInstalled</Text>
                </TouchableHighlight>

                <TouchableHighlight 
                    style={styles.button} underlayColor="#f38"
                    onPress={this.isWXAppSupportApi}>
                    <Text style={styles.buttonTitle}>isWXAppSupportApi</Text>
                </TouchableHighlight>

                <TouchableHighlight 
                    style={styles.button} underlayColor="#f38"
                    onPress={this.wechatPay}>
                    <Text style={styles.buttonTitle}>wechatPay</Text>
                </TouchableHighlight>
                
            </ScrollView>
        );
    }
}

const styles = StyleSheet.create({
  wrapper: {
        paddingTop: 60,
        paddingBottom: 20,
        alignItems: 'center',
    },
    pageTitle: {
        paddingBottom: 40
    },
    button: {
        width: 200,
        height: 40,
        marginBottom: 10,
        borderRadius: 6,
        backgroundColor: '#f38',
        alignItems: 'center',
        justifyContent: 'center',
    },
    buttonTitle: {
        fontSize: 16,
        color: '#fff'
    }
  
});

github鏈接：
https://github.com/zhoumeitong/react-native-wxpay