React Native(十五)——RN中的分享功能

時間  2019-11-13
標籤 react native 十五 分享 功能 欄目 React 简体版
原文   原文鏈接

        終於，終於，能夠總結本身使用RN時的分享功能了……html

011601

爲何呢？且聽我慢慢道來吧：

        從剛開始接觸React Native(2017年9月中旬)就着手於分享功能，直到本身參與公司的rn項目開發中，再到如今幾乎「竣工」的過程當中，這一路的「艱辛」估計也只有本身能體會到了吧。其實本身並不喜歡抱怨，也不喜歡把負能量帶給身邊的朋友，所以在遇到問題後，都是不遺餘力的攻克它，也許會「廢寢忘食」，也許是「徒勞無功」，即便中間道路實在太曲折，但慶幸的是最終的結果老是好的。That’s all.java

言歸正傳，開始咯：react

1.挑選適合本身的工具：

        拿到需求，先分析應該使用哪一種工具來解決本身的問題。分享：①首先想到的即是從rn中找相對應的組件來實現其中功能，可是轉了一大圈後才發現，只有單獨的組件，好比在微信中的分享功能，就得使用react-native-wechat;而QQ分享中的功能卻得使用react-native-qq相似的npm包。權衡再三：不能在項目中任性的添加各類組件只是爲了實現一種功能，因而便想到另一種方法：②尋找第三方工具。對比下來主流工具，shareSDK、友盟等；但這兩種第三方方法，須要本身將所需的東西集成在項目當中（android、ios），而對於我這種android、ios原生一竅不通的小白來講，最偷懶的方式③即是在強大的百度上尋找現成的集成方法。android

010602

最終便發現了宋小亮寫的開源集成方法：ios

http://blog.csdn.net/u013718120/article/details/75040805web

具體配置過程也能夠參看這裏(也是大神)：npm

http://www.cnblogs.com/vipstone/p/7884997.htmlreact-native

2.親測實驗

        有了合適的工具，是否是應該動手在項目中親測是否有效呢？微信

對了，有了合適的工具與方法，就火燒眉毛的試試效果了。網絡

010603

        其實，宋小亮的集成方法中已經將主要功能完成了，親測也有效，而在此本身就想補充兩點（只是對於像本身同樣原生開發不懂的小夥伴們說吧~）。他的方法中只是以連接形式的分享，即下面圖片中的形式：

010604

        可是咱們實際所需分享功能中卻不只僅只是侷限於連接形式，而是最起碼還有純文本、純圖片的分享功能。以前本身的解決方法就是把純圖片或者純文本的分享也按照這種連接形式轉發出去，可是時至今日才發現另一種不合理現象：

010605

        當從APP端分享至微信端後，以連接形式呈現，而再次從微信端打開進行分享（以下圖）的時候，便出現不太合理的現象（如上圖圖片展現）

010606

        而後本身想到最簡單、最直接的方式即是讓樓主再完善一下他的方法，增長一個純文本以及純圖片的分享方法。可是，畢竟每一個人的想法不同，當下手邊的事情也不盡相同。看來，只有本身來解決本身遇到的問題了，無奈改原生代碼不是本身的強項，稍微能看懂Java代碼，因而在android開發同事的指點下，就把樓主的代碼修改了一下，從而實現了本身想要的效果（可是純文本分享好像有點問題，暫時仍是以連接形式展示）：

011607

3.修改代碼

①android部分：

011608

ShareModule.java完整代碼：

package com.gangguwang.yewugo.module;

import android.app.Activity;
import android.content.Context;
import android.content.Intent;
import android.os.Handler;
import android.os.Looper;

import com.facebook.react.bridge.ActivityEventListener;
import com.facebook.react.bridge.Callback;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.bridge.ReadableArray;
import com.umeng.socialize.ShareAction;
import com.umeng.socialize.UMShareAPI;
import com.umeng.socialize.UMShareListener;
import com.umeng.socialize.bean.SHARE_MEDIA;
import com.umeng.socialize.media.UMImage;
import com.umeng.socialize.media.UMWeb;

/**
 * Created by Song on 2017/7/10.
 */
public class ShareModule extends ReactContextBaseJavaModule implements ActivityEventListener {

    private Context context;
    private static Activity mActivity;
    private static Handler mHandler = new Handler(Looper.getMainLooper());

    public static void initActivity(Activity activity) {
        mActivity = activity;
    }

    public ShareModule(ReactApplicationContext reactContext) {
        super(reactContext);
        this.context = reactContext;
    }

    private static void runOnMainThread(Runnable task) {
        mHandler.post(task);
    }

    @Override
    public String getName() {
        return "sharemodule";
    }

    /**
     * 分享連接
     * @param title
     * @param description
     * @param contentUrl
     * @param imgUrl
     * @param platform
     * @param resultCallback
     */
    @ReactMethod
    public void share(String title, String description,
                          String contentUrl, String imgUrl,final int platform,
                      final Callback resultCallback) {

        final UMWeb web = new UMWeb(contentUrl);
        web.setTitle(title); //標題
        web.setThumb(new UMImage(context, imgUrl));  //縮略圖
        web.setDescription(description); //描述
        runOnMainThread(new Runnable() {
            @Override
            public void run() {
                new ShareAction(mActivity)
                        .setPlatform(getSharePlatform(platform))
                        .withMedia(web) // 分享連接
                        .setCallback(new UMShareListener() {
                            @Override
                            public void onStart(SHARE_MEDIA share_media) {
                                //分享開始的回調
                            }

                            @Override
                            public void onResult(SHARE_MEDIA share_media) {
                                resultCallback.invoke("分享成功");
                            }

                            @Override
                            public void onError(SHARE_MEDIA share_media, Throwable throwable) {
                                resultCallback.invoke("分享失敗：" + throwable.getMessage());
                            }

                            @Override
                            public void onCancel(SHARE_MEDIA share_media) {
                                resultCallback.invoke("取消分享");
                            }
                        })
                        .share();
            }
        });
    }

    /**
     * 分享文本
     * @param text
     * @param url
     * @param platform
     * @param resultCallback
     */
    @ReactMethod
    public void shareText(final String text ,String url,final int platform,
                          final Callback resultCallback) {
        final UMImage image = new UMImage(mActivity, url);//網絡圖片
        runOnMainThread(new Runnable() {
            @Override
            public void run() {
                new ShareAction(mActivity)
                        .setPlatform(getSharePlatform(platform))
                        .withText(text)
                        .withMedia(image)
                        .setCallback(new UMShareListener() {
                            @Override
                            public void onStart(SHARE_MEDIA share_media) {
                                //分享開始的回調
                            }

                            @Override
                            public void onResult(SHARE_MEDIA share_media) {
                                resultCallback.invoke("分享成功");
                            }

                            @Override
                            public void onError(SHARE_MEDIA share_media, Throwable throwable) {
                                resultCallback.invoke("分享失敗：" + throwable.getMessage());
                            }

                            @Override
                            public void onCancel(SHARE_MEDIA share_media) {
                                resultCallback.invoke("取消分享");
                            }
                        })
                        .share();
            }
        });
        //new ShareAction(ShareActivity.this).withText(text).share();
    }

    /**
     * 分享純圖片
     * @param url
     * @param platform
     * @param resultCallback
     */
    @ReactMethod
    public void shareImage(String url,final int platform,
                           final Callback resultCallback) {
        final UMImage image = new UMImage(mActivity, url);//網絡圖片
        runOnMainThread(new Runnable() {
            @Override
            public void run() {
                new ShareAction(mActivity)
                        .setPlatform(getSharePlatform(platform))
                        .withMedia(image)
                        .setCallback(new UMShareListener() {
                            @Override
                            public void onStart(SHARE_MEDIA share_media) {
                                //分享開始的回調
                            }

                            @Override
                            public void onResult(SHARE_MEDIA share_media) {
                                resultCallback.invoke("分享成功");
                            }

                            @Override
                            public void onError(SHARE_MEDIA share_media, Throwable throwable) {
                                resultCallback.invoke("分享失敗：" + throwable.getMessage());
                            }

                            @Override
                            public void onCancel(SHARE_MEDIA share_media) {
                                resultCallback.invoke("取消分享");
                            }
                        })
                        .share();
            }
        });
      // new ShareAction(ShareActivity.this).withMedia(image).share();
    }

    private SHARE_MEDIA getSharePlatform(int platform){
        switch (platform) {
            case 0:
                return SHARE_MEDIA.QQ;
            case 1:
                return SHARE_MEDIA.SINA;
            case 2:
                return SHARE_MEDIA.WEIXIN;
            case 3:
                return SHARE_MEDIA.WEIXIN_CIRCLE;
            case 4:
                return SHARE_MEDIA.QZONE;
            case 5:
                return SHARE_MEDIA.FACEBOOK;
            default:
                return null;
        }
    }

    @Override
    public void onActivityResult(Activity activity, int requestCode, int resultCode, Intent data) {
        UMShareAPI.get(mActivity).onActivityResult(requestCode, resultCode, data);
    }

    @Override
    public void onNewIntent(Intent intent) {

    }
}
ios部分：

011609

sharemodule.m完整代碼：

//
//  share.m
//  Created by song on 2017/7/7.

#import "sharemodule.h"


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

@implementation sharemodule


RCT_EXPORT_MODULE(sharemodule)
RCT_EXPORT_METHOD(share:(NSString*)title descr:(NSString*)descr
                  webpageUrl:(NSString*)webpageUrl
                  thumbURL:(NSString*)thumbURLl
                  NSInteger:(NSInteger)platformType
                  callback:(RCTResponseSenderBlock)callback
                  )
{
  //建立分享消息對象
  UMSocialMessageObject *messageObject = [UMSocialMessageObject messageObject];
  //建立網頁內容對象
  NSString* thumbURL =  thumbURLl;
  UMShareWebpageObject *shareObject = [UMShareWebpageObject shareObjectWithTitle:title descr:descr thumImage:thumbURL];
  //設置網頁地址
  shareObject.webpageUrl = webpageUrl;
  //分享消息對象設置分享內容對象
  messageObject.shareObject = shareObject;
  
  UMSocialPlatformType type = UMSocialPlatformType_Sina ;
  
  switch (platformType) {
    case 0:
      type = UMSocialPlatformType_QQ;
      break;
    case 1:
      type = UMSocialPlatformType_Sina;
      break;
    case 2:
      type = UMSocialPlatformType_WechatSession;
      break;
    case 3:
      type = UMSocialPlatformType_WechatTimeLine;
      break;
    case 4:
      type = UMSocialPlatformType_Qzone;
      break;
    case 5:
      type = UMSocialPlatformType_Facebook;
      break;
    default:
      break;
  }

  
  dispatch_async(dispatch_get_main_queue(), ^{
    //調用分享接口
    [[UMSocialManager defaultManager] shareToPlatform:type messageObject:messageObject currentViewController:nil completion:^(id data, NSError *error) {
      NSString *message = @"分享成功";
      if (error) {
        UMSocialLogInfo(@"************Share fail with error %@*********",error);
        if(error.code == 2009){
          message = @"取消分享";
        }else{
          message = @"分享失敗";
        }
      }else{
        if ([data isKindOfClass:[UMSocialShareResponse class]]) {
          UMSocialShareResponse *resp = data;
          //分享結果消息
          UMSocialLogInfo(@"response message is %@",resp.message);
          //第三方原始返回的數據
          UMSocialLogInfo(@"response originalResponse data is %@",resp.originalResponse);
          //          code = @"200";
          //          message = resp.originalResponse;
        }else{
          UMSocialLogInfo(@"response data is %@",data);
        }
        
      }
      callback( [[NSArray alloc] initWithObjects:message, nil]);
    }];
    
  });
}
//分享文本
RCT_EXPORT_METHOD(shareText:(NSString*)text
                  thumbURL:(NSString*)thumbURLl
                  NSInteger:(NSInteger)platformType
                  callback:(RCTResponseSenderBlock)callback
                  )
{
  //建立分享消息對象
  UMSocialMessageObject *messageObject = [UMSocialMessageObject messageObject];
  //設置文本
  messageObject.text = text;
  
  UMSocialPlatformType type = UMSocialPlatformType_Sina ;
  //建立圖片內容對象
  UMShareImageObject *shareObject = [[UMShareImageObject alloc] init];
  //若是有縮略圖，則設置縮略圖
  [shareObject setShareImage:thumbURLl];
  
  //分享消息對象設置分享內容對象
  messageObject.shareObject = shareObject;
  switch (platformType) {
    case 0:
      type = UMSocialPlatformType_QQ;
      break;
    case 1:
      type = UMSocialPlatformType_Sina;
      break;
    case 2:
      type = UMSocialPlatformType_WechatSession;
      break;
    case 3:
      type = UMSocialPlatformType_WechatTimeLine;
      break;
    case 4:
      type = UMSocialPlatformType_Qzone;
      break;
    case 5:
      type = UMSocialPlatformType_Facebook;
      break;
    default:
      break;
  }
  
  dispatch_async(dispatch_get_main_queue(), ^{
    //調用分享接口
    [[UMSocialManager defaultManager] shareToPlatform:type messageObject:messageObject currentViewController:nil completion:^(id data, NSError *error) {
      NSString *message = @"分享成功";
      if (error) {
        UMSocialLogInfo(@"************Share fail with error %@*********",error);
        if(error.code == 2009){
          message = @"取消分享";
        }else{
          message = @"分享失敗";
        }
      }else{
        if ([data isKindOfClass:[UMSocialShareResponse class]]) {
          UMSocialShareResponse *resp = data;
          //分享結果消息
          UMSocialLogInfo(@"response message is %@",resp.message);
          //第三方原始返回的數據
          UMSocialLogInfo(@"response originalResponse data is %@",resp.originalResponse);
          //          code = @"200";
          //          message = resp.originalResponse;
        }else{
          UMSocialLogInfo(@"response data is %@",data);
        }
        
      }
      callback( [[NSArray alloc] initWithObjects:message, nil]);
    }];
    
  });
}
//分享純圖片
RCT_EXPORT_METHOD(shareImage:(NSString*)thumbURLl
                  NSInteger:(NSInteger)platformType
                  callback:(RCTResponseSenderBlock)callback
                  )
{
  
  //建立分享消息對象
  UMSocialMessageObject *messageObject = [UMSocialMessageObject messageObject];
  
  //建立圖片內容對象
  UMShareImageObject *shareObject = [[UMShareImageObject alloc] init];
  //若是有縮略圖，則設置縮略圖
  shareObject.thumbImage = [UIImage imageNamed:@"icon"];
  [shareObject setShareImage:@"https://mobile.umeng.com/images/pic/home/social/img-1.png"];
  
  //分享消息對象設置分享內容對象
  messageObject.shareObject = shareObject;
  UMSocialPlatformType type = UMSocialPlatformType_Sina ;
  //若是有縮略圖，則設置縮略圖
  [shareObject setShareImage:thumbURLl];
  
  //分享消息對象設置分享內容對象
  messageObject.shareObject = shareObject;
  switch (platformType) {
    case 0:
      type = UMSocialPlatformType_QQ;
      break;
    case 1:
      type = UMSocialPlatformType_Sina;
      break;
    case 2:
      type = UMSocialPlatformType_WechatSession;
      break;
    case 3:
      type = UMSocialPlatformType_WechatTimeLine;
      break;
    case 4:
      type = UMSocialPlatformType_Qzone;
      break;
    case 5:
      type = UMSocialPlatformType_Facebook;
      break;
    default:
      break;
  }
  
  dispatch_async(dispatch_get_main_queue(), ^{
    //調用分享接口
    [[UMSocialManager defaultManager] shareToPlatform:type messageObject:messageObject currentViewController:nil completion:^(id data, NSError *error) {
      NSString *message = @"分享成功";
      if (error) {
        UMSocialLogInfo(@"************Share fail with error %@*********",error);
        if(error.code == 2009){
          message = @"取消分享";
        }else{
          message = @"分享失敗";
        }
      }else{
        if ([data isKindOfClass:[UMSocialShareResponse class]]) {
          UMSocialShareResponse *resp = data;
          //分享結果消息
          UMSocialLogInfo(@"response message is %@",resp.message);
          //第三方原始返回的數據
          UMSocialLogInfo(@"response originalResponse data is %@",resp.originalResponse);
          //          code = @"200";
          //          message = resp.originalResponse;
        }else{
          UMSocialLogInfo(@"response data is %@",data);
        }
        
      }
      callback( [[NSArray alloc] initWithObjects:message, nil]);
    }];
    
  });
}
@end

      至此，分享功能暫時告一段落。謝謝各類途徑下本身尋求幫助的小夥伴們~

12

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程