天天看點

react native一鍵分享功能實作&原理和注意點(支援微信、qq、新浪微網誌等)

前言

目前使用一鍵分享比較主流的兩個SDK:ShareSDK、友盟;

又因為友盟功能比較多且比較全,比如說友盟統計、友盟推送等,是以本文重點介紹的是友盟分享功能在rn上的應用以及要注意的點。

react native綁定SDK兩種方案(一個原理):

  1.自己去要綁定的SDK官網下載下傳SDK包,按照SDK安裝指南分别在android/iOS上按步驟配置,然後在RN注冊Package和Module實作RN和原生之間的通訊;

  2.使用别人已經寫過的Package和Module+SDK本身的配置,直接拿到rn項目中用;

總結:可以看出來第二種其實是比較偷懶的方式,但是可以實作功能,而且Package和Module的書寫幾乎一樣都是大同小異的代碼(除了Module暴露調用方法的順序不同之外),是以如果市面上已經有相應的綁定大可直接拿來使用。

一鍵分享實作方案

我們本文要使用的友盟分享庫是:react-native-share 

GitHub位址:https://github.com/songxiaoliang/react-native-share

配置詳見上面GitHub裡README部分,這裡不在重複,本文重點要說的是注意事項。

注意事項(Android部分)

除了上文GitHub裡面的10個步驟之後,接下來的配置也是必不可少的.

1.需要在app目錄build.gradle檔案dependencies裡面添加如下配置:

dependencies {

    ...

  //友盟分享

  compile files('libs/weiboSDKCore_3.1.4.jar')

  compile files('libs/wechat-sdk-android-with-mta-1.1.6.jar')

  compile files('libs/umeng_social_tool.jar')

  compile files('libs/umeng_social_net.jar')

  compile files('libs/umeng_social_api.jar')

  compile files('libs/SocialSDK_WeiXin_Full.jar')

  compile files('libs/SocialSDK_Sina_Full.jar')

  compile files('libs/SocialSDK_facebook.jar')

  compile files('libs/SocialSDK_QQ_Full.jar')

  compile files('libs/SocialSDK_alipay.jar')

  compile files('libs/open_sdk_r5781.jar')

  compile files('libs/libapshare.jar')

  compile 'com.android.support:multidex:'

}

2.需要注意修改apshare、module、wxapi、WBShareActivity.java裡面的包名改成自己項目的包名;

3.MainActivity.java需要添加引用:

import com.umeng.analytics.MobclickAgent;
import android.content.Intent;
import android.os.Bundle;
import com.umeng.socialize.UMShareAPI;      

4.MainApplication.java需要添加引用:

import com.xxx.module.SharePackage;  //xxx為你的包名
import com.umeng.socialize.Config;
import com.umeng.socialize.PlatformConfig;
import com.umeng.socialize.UMShareAPI;      

5.以上配置完畢,運作依然報錯“com.android.dex.DexIndexOverflowException: method ID not in [0, 0xffff]: 65935”

解決方案:

①.在項目的build.gradle檔案的dependencies 節中添加分包設定:

dependencies { 
   ... 
   compile 'com.android.support:multidex:' 
   ... 
}      

②.通過在defaultConfig節中設定multiDexEnabled标簽為true,開啟multi-dexing支援.

defaultConfig { 
    ... 
    multiDexEnabled true 
    ... 
}      

關注下面二維碼,訂閱更多精彩内容。

react native一鍵分享功能實作&原理和注意點(支援微信、qq、新浪微網誌等)
react native一鍵分享功能實作&原理和注意點(支援微信、qq、新浪微網誌等)
react native一鍵分享功能實作&原理和注意點(支援微信、qq、新浪微網誌等)

關注公衆号(加好友):

react native一鍵分享功能實作&原理和注意點(支援微信、qq、新浪微網誌等)

作者:

王磊的部落格

出處:

http://vipstone.cnblogs.com/

rn