react native分享实现微博分享,QQ分享,微信分享、朋友圈分享[图文分享]

react native分享,友盟sdk社会化分享,微博,QQ,微信分享,分享sdk的集成方式对于前端开发者是怎么样的呢？接下来看看react native前端如何实现集成友盟分享sdk，请耐心看完绝对是干货。由于我在集成这个的时候碰到太多的坑，都是参照简书，优快云等博客，却发现那些是给android开发者看的，☁️☁️☁️以下是以微信安卓为例

react native分享SDK

第一步 申请集成友盟分享所需的key

友盟appkey	前往https://www.umeng.com注册账号，然后添加一个自己的移动应用产品 在统计类目下都行，主要是获取一个appkey
微信开发者 appid secret	前往https://open.weixin.qq.com/cgi-bin/index?t=home/index&lang=zh_CN创建一个自己的移动应用

第二步 下载所需要的sdk

前往https://developer.umeng.com/sdk/reactnative寻找reactnative的sdk，选择精简版的QQ分享微信分享微博分享SDK下载

 第三步 将下载的文件放入相应文件夹

首先预览下载的文件夹

如果目录一致的话就可以继续了！⬇️⬇️⬇️⬇️⬇️⬇️

1.回到自己的项目目录 ～～～/android/app  ;这个目录下如果没有libs文件夹的话自己建一个，然后将下载的文件夹中所有的.jar文件都放到这里！休息30秒.....
2.到下载的文件夹里面看看，找到所有的.java类文件,再休息10秒....
  到react native 分享项目目录～～～/android/app/src/main/java/com/*包名*/    ；如果不存在invokenative文件夹的话，建一个。将那几个java类放到这里。

3.回到下载的文件夹中。找到所有的res目录中的文件，休息10秒...

回到项目中～～～/android/app/src/main   ;如果不存在res目录，自己建一个。将下载的res目录中的文件与这个res合并，记得是合并

4.将 ShareUtil.js 放到项目react前端开发目录中，稍后会导入使用

至此U-share SDK文件都已经放好了,但是它不会正确的被加载

第四步 修改文件内容 

1.将jar正确依赖进来

找到~~/android/app/build.gradle

dependencies{
    compile fileTree(dir: 'libs', include: ['*.jar']) //添加
}

2.将各包类正确导入

找到invokenative文件夹下的几个java类将文件的第一行修改

package com.*包名*.invokenative;

3.初始化react native 分享

1⃣️找到 DplusReactPackage.java，注释不需要的两行
 

modules.add(new ShareModule(reactContext));//分享
//modules.add(new PushModule(reactContext));//推送
//modules.add(new AnalyticsModule(reactContext));//统计

2⃣️找到 MainActivity.java 追加

/**
     *share 初始化
     */
    @Override
    protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
        ShareModule.initSocialSDK(this);
    } 
    /**
    *
    *share 回调代码
    */
    @Override
    public void onActivityResult(int requestCode, int resultCode, Intent data) {
    super.onActivityResult(requestCode, resultCode, data);
        UMShareAPI.get(this).onActivityResult(requestCode, resultCode, data);
    }

3⃣️找到MainApplication.java 

导入包

import com.包名.invokenative.DplusReactPackage;
import com.包名.invokenative.RNUMConfigure;
import com.umeng.socialize.PlatformConfig;
import com.umeng.commonsdk.UMConfigure;

 修改：

protected List<ReactPackage> getPackages() {
            return Arrays.<ReactPackage>asList(
                    new MainReactPackage(),
                    new DplusReactPackage(),//添加这行

public void onCreate() {
        super.onCreate();
        SoLoader.init(this, /* native exopackage */ false);
        RNUMConfigure.init(this, "友盟的appkey", "Umeng", UMConfigure.DEVICE_TYPE_PHONE, ""); //添加

最后添加react native 分享QQ 微信 微博 key：

//必须是真是有效的自己申请的
{
        PlatformConfig.setWeixin("微信appid", "微信secret");
        PlatformConfig.setSinaWeibo("同理", "同理", "http://sns.whalecloud.com");
        PlatformConfig.setQQZone("同理", "同理");
    }

 

4.添加react native 分享所需的权限

找到 AndroidManifest.xml

    <!--share-->
    <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"/> 
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/> 
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /> 
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" /> 
    <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />

    <activity
    android:name=".WBShareActivity"
    android:configChanges="keyboardHidden|orientation"
    android:screenOrientation="portrait" >
    <intent-filter>
        <action android:name="com.sina.weibo.sdk.action.ACTION_SDK_REQ_ACTIVITY" />
        <category android:name="android.intent.category.DEFAULT" />
    </intent-filter>
    </activity>
    <activity
        android:name="com.sina.weibo.sdk.component.WeiboSdkBrowser"
        android:configChanges="keyboardHidden|orientation"
        android:windowSoftInputMode="adjustResize"
        android:exported="false" >
    </activity>
    <service android:name="com.sina.weibo.sdk.net.DownloadService"
        android:exported="false"></service>
    <activity
        android:name=".wxapi.WXEntryActivity"
        android:configChanges="keyboardHidden|orientation|screenSize"
        android:exported="true"
        android:screenOrientation="portrait"
        android:theme="@android:style/Theme.Translucent.NoTitleBar" />
    <activity
        android:name="com.tencent.tauth.AuthActivity"
        android:launchMode="singleTask"
        android:noHistory="true" >
    
        <intent-filter>
            <action android:name="android.intent.action.VIEW" />
            <category android:name="android.intent.category.DEFAULT" />
            <category android:name="android.intent.category.BROWSABLE" />
            <data android:scheme="tencent100424468" />  
        </intent-filter>
    </activity>
    <activity
        android:name="com.tencent.connect.common.AssistActivity"
        android:screenOrientation="portrait"
        android:theme="@android:style/Theme.Translucent.NoTitleBar"
        android:configChanges="orientation|keyboardHidden|screenSize"/>
    <activity
        android:name=".apshare.ShareEntryActivity"
        android:configChanges="keyboardHidden|orientation|screenSize"
        android:exported="true"
        android:screenOrientation="portrait"
        android:theme="@android:style/Theme.Translucent.NoTitleBar" />
    <meta-data
        android:name="UMENG_APPKEY"
        android:value="友盟appkey" >   
    </meta-data>

 第五步 在前端react native页面使用分享

例如需要在首页使用react native 分享：

index.js

import ShareUtil from '../../../config/libs/ShareUtil';//导入分享的模块

//调用方法
showShowSharePanel(){
   ShareUtil.shareboard('','imgUrl','https://m.baidu.com/','百度一下,你就知道',[0,2,3],(code,message) =>{
      Alert.alert('title', 'msg:' + message);
    });
  }