在ReactNative中使用友盟分享iOS篇

首先聲明demo的GitHub地址：https://github.com/jaydenin/ReactNativeShare
創(chuàng)建項目和申請各個平臺的賬號要先弄好柿赊，這里就不一一說明了写隶。
流程可以參考友盟的官網(wǎng)文檔http://dev.umeng.com/social/ios/quick-integration
1.1.1 下載友盟的SDK

下載SDK

需要分享到那個平臺就下載現(xiàn)在那個

下載SDK

1.1.2 接入SDK
打開xcode夷狰，把下載的 UMSocial 文件夾拉到自己工程中

然后點擊finsih

添加項目配置
按下圖修改为黎，可以搜索關(guān)鍵詞other linker

添加項目配置

在Other Linker Flags加入 -ObjC 請直接復(fù)制

加入SDK依賴的系統(tǒng)庫

依賴

首先添加SDK的二個依賴

libsqlite3.tbd
CoreGraphics.framework

1.1.3 添加第三方平臺依賴庫
根據(jù)集成的不同平臺加入相關(guān)的依賴庫，未列出平臺則不需添加添加方式：選中項目Target -> General -> Linked Frameworks and Libraries列表中進(jìn)行添加（上圖中繼續(xù)添加）
微信(完整版)-精簡版無需添加以下依賴庫

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

QQ/QZone/TIM(完整版)-精簡版無需添加以下依賴庫

SystemConfiguration.framework
libc++.tbd

新浪微博(完整版)-精簡版無需添加以下依賴庫

SystemConfiguration.framework
CoreTelephony.framework
ImageIO.framework
libsqlite3.tbd
libz.tbd

Twitter

CoreData.framework

Twitter平臺加入后需在Twitter目錄右鍵->Add files to "Twitter"->添加TwitterKit.framework/Resources/TwitterKitResources.bundle最蕾。
短信

MessageUI.framework

SafariServices.framework

VKontakte

CoreGraphics.framework
Security.framework

注意：添加時要看清楚是否已經(jīng)添加過，請勿重復(fù)添加Ｅ呙凇！Ｋ嗟堋玷室！

1.2 第三方平臺配置
1.2.1 配置SSO白名單

在iOS9以上系統(tǒng)需要增加一個可跳轉(zhuǎn)App的白名單，即LSApplicationQueriesSchemes
否則將在SDK判斷是否跳轉(zhuǎn)時用到的canOpenURL時返回NO笤受，進(jìn)而只進(jìn)行webview授權(quán)或授權(quán)/分享失敗

在項目中的info.plist中加入應(yīng)用白名單穷缤，右鍵info.plist選擇source code打開(plist具體設(shè)置在Build Setting -> Packaging -> Info.plist File可獲取plist路徑) 請根據(jù)選擇的平臺對以下配置進(jìn)行縮減：

plist文件

<key>LSApplicationQueriesSchemes</key>
<array>
    <!-- 微信 URL Scheme 白名單-->
    <string>wechat</string>
    <string>weixin</string>

    <!-- 新浪微博 URL Scheme 白名單-->
    <string>sinaweibohd</string>
    <string>sinaweibo</string>
    <string>sinaweibosso</string>
    <string>weibosdk</string>
    <string>weibosdk2.5</string>

    <!-- QQ、Qzone感论、TIM URL Scheme 白名單-->
    <string>mqqapi</string>
    <string>mqq</string>
    <string>mqqOpensdkSSoLogin</string>
    <string>mqqconnect</string>
    <string>mqqopensdkdataline</string>
    <string>mqqopensdkgrouptribeshare</string>
    <string>mqqopensdkfriend</string>
    <string>mqqopensdkapi</string>
    <string>mqqopensdkapiV2</string>
    <string>mqqopensdkapiV3</string>
    <string>mqqopensdkapiV4</string>
    <string>mqzoneopensdk</string>
    <string>wtloginmqq</string>
    <string>wtloginmqq2</string>
    <string>mqqwpa</string>
    <string>mqzone</string>
    <string>mqzonev2</string>
    <string>mqzoneshare</string>
    <string>wtloginqzone</string>
    <string>mqzonewx</string>
    <string>mqzoneopensdkapiV2</string>
    <string>mqzoneopensdkapi19</string>
    <string>mqzoneopensdkapi</string>
    <string>mqqbrowser</string>
    <string>mttbrowser</string>
    <string>tim</string>
    <string>timapi</string>
    <string>timopensdkfriend</string>
    <string>timwpa</string>
    <string>timgamebindinggroup</string>
    <string>timapiwallet</string>
    <string>timOpensdkSSoLogin</string>
    <string>wtlogintim</string>
    <string>timopensdkgrouptribeshare</string>
    <string>timopensdkapiV4</string>
    <string>timgamebindinggroup</string>
    <string>timopensdkdataline</string>
    <string>wtlogintimV1</string>
    <string>timapiV1</string>

    <!-- 支付寶 URL Scheme 白名單-->
    <string>alipay</string>
    <string>alipayshare</string>

    <!-- 釘釘 URL Scheme 白名單-->
      <string>dingtalk</string>
      <string>dingtalk-open</string>

    <!--Linkedin URL Scheme 白名單-->
    <string>linkedin</string>
    <string>linkedin-sdk2</string>
    <string>linkedin-sdk</string>

    <!-- 點點蟲 URL Scheme 白名單-->
    <string>laiwangsso</string>

    <!-- 易信 URL Scheme 白名單-->
    <string>yixin</string>
    <string>yixinopenapi</string>

    <!-- instagram URL Scheme 白名單-->
    <string>instagram</string>

    <!-- whatsapp URL Scheme 白名單-->
    <string>whatsapp</string>

    <!-- line URL Scheme 白名單-->
    <string>line</string>

    <!-- Facebook URL Scheme 白名單-->
    <string>fbapi</string>
    <string>fb-messenger-api</string>
    <string>fbauth2</string>
    <string>fbshareextension</string>

    <!-- Kakao URL Scheme 白名單-->  
    <!-- 注：以下第一個參數(shù)需替換為自己的kakao appkey--> 
    <!-- 格式為 kakao + "kakao appkey"-->    
    <string>kakaofa63a0b2356e923f3edd6512d531f546</string>
    <string>kakaokompassauth</string>
    <string>storykompassauth</string>
    <string>kakaolink</string>
    <string>kakaotalk-4.5.0</string>
    <string>kakaostory-2.9.0</string>

   <!-- pinterest URL Scheme 白名單-->  
    <string>pinterestsdk.v1</string>

   <!-- Tumblr URL Scheme 白名單-->  
    <string>tumblr</string>

   <!-- 印象筆記 -->
    <string>evernote</string>
    <string>en</string>
    <string>enx</string>
    <string>evernotecid</string>
    <string>evernotemsg</string>

   <!-- 有道云筆記-->
    <string>youdaonote</string>
    <string>ynotedictfav</string>
    <string>com.youdao.note.todayViewNote</string>
    <string>ynotesharesdk</string>

   <!-- Google+-->
    <string>gplus</string>

   <!-- Pocket-->
    <string>pocket</string>
    <string>readitlater</string>
    <string>pocket-oauth-v1</string>
    <string>fb131450656879143</string>
    <string>en-readitlater-5776</string>
    <string>com.ideashower.ReadItLaterPro3</string>
    <string>com.ideashower.ReadItLaterPro</string>
    <string>com.ideashower.ReadItLaterProAlpha</string>
    <string>com.ideashower.ReadItLaterProEnterprise</string>

   <!-- VKontakte-->
    <string>vk</string>
    <string>vk-share</string>
    <string>vkauthorize</string>
</array>

比如下圖

plist文件

1.2.1.1 異常情況
如果出現(xiàn)類似failed for URL: ""weibosdk://""-error绅项，可能是以下情況：

在模擬器上可能出現(xiàn)此log，因為沒安裝對應(yīng)app比肄，類似還有微信快耿、QQ等需要打開相應(yīng)app的都會有這樣的系統(tǒng)log，此條日志可以忽略芳绩。
而如果出現(xiàn)error: "This app is not allowed to query for scheme xxx"掀亥，說明白名單沒有配置，請檢查上述配置是否正確加入工程妥色。

1.2.2 URL Scheme
URL Scheme是通過系統(tǒng)找到并跳轉(zhuǎn)對應(yīng)app的設(shè)置搪花，通過向項目中的info.plist文件中加入URL types可使用第三方平臺所注冊的appkey信息向系統(tǒng)注冊你的app，當(dāng)跳轉(zhuǎn)到第三方應(yīng)用授權(quán)或分享后，可直接跳轉(zhuǎn)回你的app撮竿。

添加URL Types可工程設(shè)置面板設(shè)置

Scheme

如果要分享多個可以添加多個URL types

URL types

初始化設(shè)置

2.1 初始化U-Share及第三方平臺
應(yīng)用啟動后進(jìn)行U-Share和第三方平臺的初始化工作以下代碼將所有平臺初始化示例放出吮便，開發(fā)者根據(jù)平臺需要選取相應(yīng)代碼，并替換為所屬注冊的appKey和appSecret幢踏。
在AppDelegate.m中設(shè)置如下代碼

注意并不是所有分享平臺都需要配置對應(yīng)的Appkey髓需，比如WhatsApp、印象筆記平臺會直接通過AirDrop方式分享房蝉，而短信和郵件會直接調(diào)用系統(tǒng)自帶的應(yīng)用進(jìn)行分享僚匆，這兩種分享方式均不需要配置對應(yīng)的三方Appkey

初始化

#import <UMSocialCore/UMSocialCore.h>

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    /* 打開調(diào)試日志 */
    [[UMSocialManager defaultManager] openLog:YES];

    /* 設(shè)置友盟appkey */
    [[UMSocialManager defaultManager] setUmSocialAppkey:USHARE_DEMO_APPKEY];

    [self configUSharePlatforms];

    [self confitUShareSettings];

    // Custom code

    return YES;
}

- (void)confitUShareSettings
{
    /*
     * 打開圖片水印
     */
    //[UMSocialGlobal shareInstance].isUsingWaterMark = YES;

    /*
     * 關(guān)閉強制驗證https，可允許http圖片分享搭幻，但需要在info.plist設(shè)置安全域名
     <key>NSAppTransportSecurity</key>
     <dict>
     <key>NSAllowsArbitraryLoads</key>
     <true/>
     </dict>
     */
    //[UMSocialGlobal shareInstance].isUsingHttpsWhenShareContent = NO;

}

- (void)configUSharePlatforms
{
    /* 
     設(shè)置微信的appKey和appSecret
     [微信平臺從U-Share 4/5升級說明]http://dev.umeng.com/social/ios/%E8%BF%9B%E9%98%B6%E6%96%87%E6%A1%A3#1_1
     */
    [[UMSocialManager defaultManager] setPlaform:UMSocialPlatformType_WechatSession appKey:@"wxdc1e388c3822c80b" appSecret:@"3baf1193c85774b3fd9d18447d76cab0" redirectURL:nil];
    /*
     * 移除相應(yīng)平臺的分享咧擂，如微信收藏
     */
    //[[UMSocialManager defaultManager] removePlatformProviderWithPlatformTypes:@[@(UMSocialPlatformType_WechatFavorite)]];

    /* 設(shè)置分享到QQ互聯(lián)的appID
     * U-Share SDK為了兼容大部分平臺命名，統(tǒng)一用appKey和appSecret進(jìn)行參數(shù)設(shè)置檀蹋，而QQ平臺僅需將appID作為U-Share的appKey參數(shù)傳進(jìn)即可松申。
     100424468.no permission of union id
     [QQ/QZone平臺集成說明]http://dev.umeng.com/social/ios/%E8%BF%9B%E9%98%B6%E6%96%87%E6%A1%A3#1_3
    */
    [[UMSocialManager defaultManager] setPlaform:UMSocialPlatformType_QQ appKey:@"1105821097"/*設(shè)置QQ平臺的appID*/  appSecret:nil redirectURL:@"http://mobile.umeng.com/social"];

    /* 
     設(shè)置新浪的appKey和appSecret
     [新浪微博集成說明]http://dev.umeng.com/social/ios/%E8%BF%9B%E9%98%B6%E6%96%87%E6%A1%A3#1_2
     */
    [[UMSocialManager defaultManager] setPlaform:UMSocialPlatformType_Sina appKey:@"3921700954"  appSecret:@"04b48b094faeb16683c32669824ebdad" redirectURL:@"https://sns.whalecloud.com/sina2/callback"];

    /* 釘釘?shù)腶ppKey */
    [[UMSocialManager defaultManager] setPlaform: UMSocialPlatformType_DingDing appKey:@"dingoalmlnohc0wggfedpk" appSecret:nil redirectURL:nil];

    /* 支付寶的appKey */
    [[UMSocialManager defaultManager] setPlaform: UMSocialPlatformType_AlipaySession appKey:@"2015111700822536" appSecret:nil redirectURL:nil];


    /* 設(shè)置易信的appKey */
    [[UMSocialManager defaultManager] setPlaform: UMSocialPlatformType_YixinSession appKey:@"yx35664bdff4db42c2b7be1e29390c1a06" appSecret:nil redirectURL:@"http://mobile.umeng.com/social"];

    /* 設(shè)置點點蟲（原來往）的appKey和appSecret */
    [[UMSocialManager defaultManager] setPlaform: UMSocialPlatformType_LaiWangSession appKey:@"8112117817424282305" appSecret:@"9996ed5039e641658de7b83345fee6c9" redirectURL:@"http://mobile.umeng.com/social"];

    /* 設(shè)置領(lǐng)英的appKey和appSecret */
    [[UMSocialManager defaultManager] setPlaform:UMSocialPlatformType_Linkedin appKey:@"81t5eiem37d2sc"  appSecret:@"7dgUXPLH8kA8WHMV" redirectURL:@"https://api.linkedin.com/v1/people"];

    /* 設(shè)置Twitter的appKey和appSecret */
    [[UMSocialManager defaultManager] setPlaform:UMSocialPlatformType_Twitter appKey:@"fB5tvRpna1CKK97xZUslbxiet"  appSecret:@"YcbSvseLIwZ4hZg9YmgJPP5uWzd4zr6BpBKGZhf07zzh3oj62K" redirectURL:nil];

    /* 設(shè)置Facebook的appKey和UrlString */
    [[UMSocialManager defaultManager] setPlaform:UMSocialPlatformType_Facebook appKey:@"506027402887373"  appSecret:nil redirectURL:nil];

    /* 設(shè)置Pinterest的appKey */
    [[UMSocialManager defaultManager] setPlaform:UMSocialPlatformType_Pinterest appKey:@"4864546872699668063"  appSecret:nil redirectURL:nil];

    /* dropbox的appKey */
    [[UMSocialManager defaultManager] setPlaform: UMSocialPlatformType_DropBox appKey:@"k4pn9gdwygpy4av" appSecret:@"td28zkbyb9p49xu" redirectURL:@"https://mobile.umeng.com/social"];

    /* vk的appkey */
    [[UMSocialManager defaultManager]  setPlaform:UMSocialPlatformType_VKontakte appKey:@"5786123" appSecret:nil redirectURL:nil];

}

2.2 設(shè)置系統(tǒng)回調(diào)

// 支持所有iOS系統(tǒng)
- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation
{
    //6.3的新的API調(diào)用，是為了兼容國外平臺(例如:新版facebookSDK,VK等)的調(diào)用[如果用6.2的api調(diào)用會沒有回調(diào)],對國內(nèi)平臺沒有影響
    BOOL result = [[UMSocialManager defaultManager] handleOpenURL:url sourceApplication:sourceApplication annotation:annotation];
    if (!result) {
         // 其他如支付等SDK的回調(diào)
    }
    return result;
}

到此基本上集成成功了俯逾，可以運行試一試是否報錯攻臀，如沒有可以繼續(xù)下一步rn的接入。
首先可以先在xcode新建二個文件
然后可以復(fù)制下面的代碼

#import <UIKit/UIKit.h>

#import <Foundation/Foundation.h>
// 導(dǎo)入RCTBridgeModule類纱昧，這個是react-native提供
#import <React/RCTBridgeModule.h>
// 遵守RCTBridgeModul協(xié)議
@interface share : NSObject<RCTBridgeModule>

@end


#import "share.h"
#import <React/RCTBridgeModule.h>
#import <UMSocialCore/UMSocialCore.h>
#import <UMSocialCore/UMSocialManager.h>

@implementation share
RCT_EXPORT_MODULE(share)
RCT_EXPORT_METHOD(share:(NSInteger )platformType title:(NSString*)title descr:(NSString*)descr
                  thumbURL:(NSString*)thumbURLl
                  webpageUrl:(NSString*)webpageUrl
                  callback:(RCTResponseSenderBlock)callback
                  )
{
  //創(chuàng)建分享消息對象
  UMSocialMessageObject *messageObject = [UMSocialMessageObject messageObject];
  //創(chuàng)建網(wǎng)頁內(nèi)容對象
  NSString* thumbURL =  thumbURLl;
  UMShareWebpageObject *shareObject = [UMShareWebpageObject shareObjectWithTitle:title descr:descr thumImage:thumbURL];
  //設(shè)置網(wǎng)頁地址
  shareObject.webpageUrl = webpageUrl;
  //分享消息對象設(shè)置分享內(nèi)容對象
  messageObject.shareObject = shareObject;
  
  
  dispatch_async(dispatch_get_main_queue(), ^{
    //調(diào)用分享接口
    [[UMSocialManager defaultManager] shareToPlatform:platformType messageObject:messageObject currentViewController:nil completion:^(id data, NSError *error) {
      
      NSString * code = [NSString stringWithFormat:@"%ld",(long)error.code];
      NSString *message = data;
      
      if (error) {
        UMSocialLogInfo(@"************Share fail with error %@*********",error);
      }else{
        if ([data isKindOfClass:[UMSocialShareResponse class]]) {
          UMSocialShareResponse *resp = data;
          //分享結(jié)果消息
          UMSocialLogInfo(@"response message is %@",resp.message);
          //第三方原始返回的數(shù)據(jù)
          UMSocialLogInfo(@"response originalResponse data is %@",resp.originalResponse);
          code = @"200";
          message = resp.originalResponse;
        }else{
          UMSocialLogInfo(@"response data is %@",data);
        }
        
      }
      callback( [[NSArray alloc] initWithObjects:code,message, nil]);
    }];
   
  });
  
 
  
  
}

@end

image.png

到此可以寫rn的代碼了，調(diào)用起來非常方便
只需要在你的分享的點擊方法中寫上(記得import NativeModules)

    NativeModules.share.share(
             i + 1, //分享的平臺
             data.title,//分享的標(biāo)題
             data.subTitle,//分享的內(nèi)容
             data.logo,//分享圖片的URL
             data.link,//分享的URL
              (code,data) => {
                 if (code == '200'){
                     console.log('分享成功')
                 } else {
                     console.log('分享失敗  ' + code + '  ' + data)
                 }
             }
         )

其中分享的平臺platformType的類型可以參考SDK的文件

platformType

對于Android可以參考另外的博客：
http://blog.csdn.net/u013718120/article/details/75040805

最后編輯于：2017.12.08 17:33:55

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末堡赔，一起剝皮案震驚了整個濱河市识脆，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌善已，老刑警劉巖灼捂，帶你破解...
沈念sama閱讀 207,113評論 6贊 481
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異换团，居然都是意外死亡悉稠，警方通過查閱死者的電腦和手機，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 88,644評論 2贊 381
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門艘包，熙熙樓的掌柜王于貴愁眉苦臉地迎上來的猛，“玉大人，你說我怎么就攤上這事想虎∝宰穑” “怎么了？”我有些...
開封第一講書人閱讀 153,340評論 0贊 344
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵舌厨，是天一觀的道長岂却。經(jīng)常有香客問我，道長，這世上最難降的妖魔是什么躏哩？我笑而不...
開封第一講書人閱讀 55,449評論 1贊 279
?港島之戀（遺憾婚禮）
正文為了忘掉前任署浩，我火速辦了婚禮，結(jié)果婚禮上扫尺，老公的妹妹穿的比我還像新娘筋栋。我一直安慰自己，他們只是感情好器联，可當(dāng)我...
茶點故事閱讀 64,445評論 5贊 374
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布二汛。她就那樣靜靜地躺著，像睡著了一般拨拓。火紅的嫁衣襯著肌膚如雪肴颊。梳的紋絲不亂的頭發(fā)上，一...
開封第一講書人閱讀 49,166評論 1贊 284
城市分裂傳說
那天渣磷，我揣著相機與錄音婿着，去河邊找鬼。笑死醋界，一個胖子當(dāng)著我的面吹牛竟宋，可吹牛的內(nèi)容都是我干的。我是一名探鬼主播形纺，決...
沈念sama閱讀 38,442評論 3贊 401
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼丘侠，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了逐样？” 一聲冷哼從身側(cè)響起蜗字，我...
開封第一講書人閱讀 37,105評論 0贊 261
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎脂新，沒想到半個月后挪捕，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
沈念sama閱讀 43,601評論 1贊 300
?護(hù)林員之死
正文獨居荒郊野嶺守林人離奇死亡争便，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 36,066評論 2贊 325
?白月光啟示錄
正文我和宋清朗相戀三年级零，在試婚紗的時候發(fā)現(xiàn)自己被綠了。大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片滞乙。...
茶點故事閱讀 38,161評論 1贊 334
活死人
序言：一個原本活蹦亂跳的男人離奇死亡奏纪，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出斩启，到底是詐尸還是另有隱情亥贸，我是刑警寧澤，帶...
沈念sama閱讀 33,792評論 4贊 323
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布浇垦，位于F島的核電站炕置，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜朴摊，卻給世界環(huán)境...
茶點故事閱讀 39,351評論 3贊 307
男人毒藥：我在死后第九天來索命
文/蒙蒙一默垄、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧甚纲，春花似錦口锭、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 30,352評論 0贊 19
一樁弒父案鹃操，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽。三九已至春哨，卻和暖如春荆隘，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背赴背。一陣腳步聲響...
開封第一講書人閱讀 31,584評論 1贊 261
情欲美人皮
我被黑心中介騙來泰國打工椰拒，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人凰荚。一個月前我還...
沈念sama閱讀 45,618評論 2贊 355
代替公主和親
正文我出身青樓燃观，卻偏偏與公主長得像，于是被迫代替她去往敵國和親便瑟。傳聞我的和親對象是個殘疾皇子缆毁，可洞房花燭夜當(dāng)晚...
茶點故事閱讀 42,916評論 2贊 344

在ReactNative中使用友盟分享iOS篇

推薦閱讀更多精彩內(nèi)容