github上面已经有封装微信分享的原生SDK库了，大家可以进行去下载安装，然后RN端就可以进行调用使用了。具体项目地址:https://github.com/weflex/react-native-wechat 不过该库不仅支持微信分享，还支持微信登录，收藏以及微信支付的。但是登录，支付之类的功能需要开通开发者认证权限，那是需要300元一年的啦~

3.1.库安装方法:npm install react-native-wechat --save

查看图片

3.2.Android版本安装配置方法

①.在android/settings.gradle文件中添加如下代码:

include ':RCTWeChat'

project(':RCTWeChat').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-wechat/android')

②.在android/app/build.gradle文件中的dependencies标签中添加模块依赖

...

dependencies {

   ...

   compile project(':RCTWeChat')    // Add this line only.

}

③.在MainActivity.java文件中添加如下代码

import com.theweflex.react.WeChatPackage;       // Add this line before public class MainActivity

...

/**
 * A list of packages used by the app. If the app uses additional views
 * or modules besides the default ones, add more packages here.
 */
@Override
protected List getPackages() {
    return Arrays.asList(
        new MainReactPackage()
        , new WeChatPackage()        // Add this line
    );
}

④.在android项目中创建wxapi包名，在该包名底下创建WXEntryActivity.java类，该类用于去微信获取请求以及响应。

package your.package.wxapi;

import android.app.Activity;
import android.os.Bundle;

import com.theweflex.react.WeChatModule;

public class WXEntryActivity extends Activity{
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        WeChatModule.handleIntent(getIntent());
        finish();
    }
}

查看图片

⑤.在AndroidManifest.xml文件中添加刚刚创建的Actiivty的配置


  ...
  
    ...

⑥.混淆设置,在proguard-rules.pro中添加如下代码，当然如果不混淆就不安全啦

-keep class com.tencent.mm.sdk.** {
   *;
}

3.3.iOS版本安装配置方法

①.我们之前已经执行过npm安装微信库了，接下来我们有两种方法进行链接第一种就是直接通过rnpm link，如下:

查看图片

当然如果大家这种方案没有成功链接的话，可以采用手动方式了，具体教程请点击进入

②.接下来在xcode中添加部分库依赖(Link Binary With Libraries):

SystemConfiguration.framework
CoreTelephony.framework
libsqlite3.0
libc++
libz

查看图片

③.选中Targets-info配置中URL Schema中配置刚申请下来的appid

查看图片

④.为了iOS9.0的支持，在Targets-info中的Custom iOS Traget Properties标签中添加LSApplicationQueriesSchemes字段，值分别为wechat和weixin

查看图片

⑤.接下来需要在APPDelete.m文件中做一下Linking的处理配置(具体有关Linking的配置请点击查看)

- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url
  sourceApplication:(NSString *)sourceApplication annotation:(id)annotation
{
  return [RCTLinkingManager application:application openURL:url
                            sourceApplication:sourceApplication annotation:annotation];
}

(四)微信好友/朋友圈分享实例

上面我们已经把基本安装配置已经讲解完成了，下面我们通过实例来进行演示一下，主要演示分享到好友/朋友圈的链接以及文本，关于更多的分享实例例如文件，图片，视频，语言等等可以查看项目的说明文件即可。

分享实例步骤:

注册应用
本文/朋友圈分享

Android测试应用需要打包测试

iOS版本直接测试即可,代码和下面一样

让我们来看一下实例代码，今天主要演示好友文本/链接以及朋友圈文本/链接分享:

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

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableHighlight,
  ToastAndroid,
} from 'react-native';
var WeChat=require('react-native-wechat');
//import fs from 'react-native-fs';
class CustomButton extends Component {
  render() {
    return (
      
        {this.props.text}
      
    );
  }
}
class RNWeChatDemo extends Component {
  constructor(props) {
      super(props);  
      //应用注册
      WeChat.registerApp('wx8d560da3ba038e7e');
  }
  render() {
    return (
      
        
            微信好友/朋友圈分享实例
        
         {
                  WeChat.isWXAppInstalled()
                    .then((isInstalled) => {
                      if (isInstalled) {
                        WeChat.shareToSession({type: 'text', description: '测试微信好友分享文本'})
                        .catch((error) => {
                          ToastShort(error.message);
                        });
                      } else {
                        ToastShort('没有安装微信软件，请您安装微信之后再试');
                      }
                    });
              }}
        />
         {
                  WeChat.isWXAppInstalled()
                    .then((isInstalled) => {
                      if (isInstalled) {
                        WeChat.shareToSession({
                          title:'微信好友测试链接',
                          description: '分享自:江清清的技术专栏(www.lcode.org)',
                          thumbImage: 'http://mta.zttit.com:8080/images/ZTT_1404756641470_image.jpg',
                          type: 'news',
                          webpageUrl: 'http://www.lcode.org'
                        })
                        .catch((error) => {
                          ToastShort(error.message);
                        });
                      } else {
                        ToastShort('没有安装微信软件，请您安装微信之后再试');
                      }
                    });
              }}
        />
         {
                  WeChat.isWXAppInstalled()
                    .then((isInstalled) => {
                      if (isInstalled) {
                        WeChat.shareToTimeline({type: 'text', description: '测试微信朋友圈分享文本'})
                        .catch((error) => {
                          ToastShort(error.message);
                        });
                      } else {
                        ToastShort('没有安装微信软件，请您安装微信之后再试');
                      }
                    });
              }}
        />
         {
                  WeChat.isWXAppInstalled()
                    .then((isInstalled) => {
                      if (isInstalled) {
                        WeChat.shareToTimeline({
                          title:'微信朋友圈测试链接',
                          description: '分享自:江清清的技术专栏(www.lcode.org)',
                          thumbImage: 'http://mta.zttit.com:8080/images/ZTT_1404756641470_image.jpg',
                          type: 'news',
                          webpageUrl: 'http://www.lcode.org'
                        })
                        .catch((error) => {
                          ToastShort(error.message);
                        });
                      } else {
                        ToastShort('没有安装微信软件，请您安装微信之后再试');
                      }
                    });
              }}
        />
      
    );
  }
}
const styles = StyleSheet.create({

  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  button: {
    margin:5,
    backgroundColor: 'white',
    padding: 15,
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderBottomColor: '#cdcdcd',
  }, 
});

AppRegistry.registerComponent('RNWeChatDemo', () => RNWeChatDemo);

运行效果:

查看图片查看图片查看图片

(五)最后总结

今天带着大家从最基本开始一起来实现一下微信分享功能，当然除了分享文本和链接以外，还可以分享语音，视频，图片，文件等等。这些相关的使用API可以参考上面WeChat库中的文档即可。

刚创建的React Native交流6群:426762904,欢迎各位大牛,React Native技术爱好者加入交流!同时博客右侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送!

本文章实例项目地址:https://github.com/jiangqqlmj/RNWeChatDemo

尊重原创，未经授权不得转载：From Sky丶清（http://www.lcode.org/）侵权必究！

关注我的订阅号(codedev123),每天分享移动开发技术(Android/IOS),项目管理以及博客文章!(欢迎关注，第一时间推送精彩文章)

查看图片

关注我的微博，可以获得更多精彩内容