终于,终于,可以总结自己使用RN时的分享功能了……

为什么呢?且听我慢慢道来吧:

从刚开始接触React Native(2017年9月中旬)就着手于分享功能,直到自己参与公司的rn项目开发中,再到现在几乎“竣工”的过程中,这一路的“艰辛”估计也只有自己能体会到了吧。其实自己并不喜欢抱怨,也不喜欢把负能量带给身边的朋友,因此在遇到问题后,都是竭尽全力的攻克它,也许会“废寝忘食”,也许是“徒劳无功”,即使中间道路实在太曲折,但庆幸的是最终的结果总是好的。That’s all.

言归正传,开始咯:

1.挑选适合自己的工具:

拿到需求,先分析应该使用哪种工具来解决自己的问题。分享:首先想到的便是从rn中找相对应的组件来实现其中功能,但是转了一大圈后才发现,只有单独的组件,比如在微信中的分享功能,就得使用react-native-wechat;而QQ分享中的功能却得使用react-native-qq类似的npm包。权衡再三:不能在项目中任性的添加各种组件只是为了实现一种功能,于是便想到另外一种方法:寻找第三方工具。对比下来主流工具,shareSDK、友盟等;但这两种第三方方法,需要自己将所需的东西集成在项目当中(android、ios),而对于我这种android、ios原生一窍不通的小白来说,最偷懒的方式便是在强大的百度上寻找现成的集成方法。

最终便发现了宋小亮写的开源集成方法:

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

具体配置过程也可以参看这里(也是大神):

http://www.cnblogs.com/vipstone/p/7884997.html

2.亲测实验

有了合适的工具,是不是应该动手在项目中亲测是否有效呢?

对了,有了合适的工具与方法,就迫不及待的试试效果了。

其实,宋小亮的集成方法中已经将主要功能完成了,亲测也有效,而在此自己就想补充两点(只是对于像自己一样原生开发不懂的小伙伴们说吧~)。他的方法中只是以链接形式的分享,即下面图片中的形式:

但是我们实际所需分享功能中却不仅仅只是局限于链接形式,而是最起码还有纯文本、纯图片的分享功能。之前自己的解决方法就是把纯图片或者纯文本的分享也按照这种链接形式转发出去,但是时至今日才发现另外一种不合理现象:

当从APP端分享至微信端后,以链接形式呈现,而再次从微信端打开进行分享(如下图)的时候,便出现不太合理的现象(如上图图片展示)

然后自己想到最简单、最直接的方式便是让楼主再完善一下他的方法,增加一个纯文本以及纯图片的分享方法。但是,毕竟每个人的想法不一样,当下手边的事情也不尽相同。看来,只有自己来解决自己遇到的问题了,无奈改原生代码不是自己的强项,稍微能看懂Java代码,于是在android开发同事的指点下,就把楼主的代码修改了一下,从而实现了自己想要的效果(但是纯文本分享好像有点问题,暂时还是以链接形式展现):

3.修改代码

①android部分:

ShareModule.java完整代码:

  1. package com.gangguwang.yewugo.module;
  2.  
  3. import android.app.Activity;
  4. import android.content.Context;
  5. import android.content.Intent;
  6. import android.os.Handler;
  7. import android.os.Looper;
  8.  
  9. import com.facebook.react.bridge.ActivityEventListener;
  10. import com.facebook.react.bridge.Callback;
  11. import com.facebook.react.bridge.ReactApplicationContext;
  12. import com.facebook.react.bridge.ReactContextBaseJavaModule;
  13. import com.facebook.react.bridge.ReactMethod;
  14. import com.facebook.react.bridge.ReadableArray;
  15. import com.umeng.socialize.ShareAction;
  16. import com.umeng.socialize.UMShareAPI;
  17. import com.umeng.socialize.UMShareListener;
  18. import com.umeng.socialize.bean.SHARE_MEDIA;
  19. import com.umeng.socialize.media.UMImage;
  20. import com.umeng.socialize.media.UMWeb;
  21.  
  22. /**
  23. * Created by Song on 2017/7/10.
  24. */
  25. public class ShareModule extends ReactContextBaseJavaModule implements ActivityEventListener {
  26.  
  27. private Context context;
  28. private static Activity mActivity;
  29. private static Handler mHandler = new Handler(Looper.getMainLooper());
  30.  
  31. public static void initActivity(Activity activity) {
  32. mActivity = activity;
  33. }
  34.  
  35. public ShareModule(ReactApplicationContext reactContext) {
  36. super(reactContext);
  37. this.context = reactContext;
  38. }
  39.  
  40. private static void runOnMainThread(Runnable task) {
  41. mHandler.post(task);
  42. }
  43.  
  44. @Override
  45. public String getName() {
  46. return "sharemodule";
  47. }
  48.  
  49. /**
  50. * 分享链接
  51. * @param title
  52. * @param description
  53. * @param contentUrl
  54. * @param imgUrl
  55. * @param platform
  56. * @param resultCallback
  57. */
  58. @ReactMethod
  59. public void share(String title, String description,
  60. String contentUrl, String imgUrl,final int platform,
  61. final Callback resultCallback) {
  62.  
  63. final UMWeb web = new UMWeb(contentUrl);
  64. web.setTitle(title); //标题
  65. web.setThumb(new UMImage(context, imgUrl)); //缩略图
  66. web.setDescription(description); //描述
  67. runOnMainThread(new Runnable() {
  68. @Override
  69. public void run() {
  70. new ShareAction(mActivity)
  71. .setPlatform(getSharePlatform(platform))
  72. .withMedia(web) // 分享链接
  73. .setCallback(new UMShareListener() {
  74. @Override
  75. public void onStart(SHARE_MEDIA share_media) {
  76. //分享开始的回调
  77. }
  78.  
  79. @Override
  80. public void onResult(SHARE_MEDIA share_media) {
  81. resultCallback.invoke("分享成功");
  82. }
  83.  
  84. @Override
  85. public void onError(SHARE_MEDIA share_media, Throwable throwable) {
  86. resultCallback.invoke("分享失败:" + throwable.getMessage());
  87. }
  88.  
  89. @Override
  90. public void onCancel(SHARE_MEDIA share_media) {
  91. resultCallback.invoke("取消分享");
  92. }
  93. })
  94. .share();
  95. }
  96. });
  97. }
  98.  
  99. /**
  100. * 分享文本
  101. * @param text
  102. * @param url
  103. * @param platform
  104. * @param resultCallback
  105. */
  106. @ReactMethod
  107. public void shareText(final String text ,String url,final int platform,
  108. final Callback resultCallback) {
  109. final UMImage image = new UMImage(mActivity, url);//网络图片
  110. runOnMainThread(new Runnable() {
  111. @Override
  112. public void run() {
  113. new ShareAction(mActivity)
  114. .setPlatform(getSharePlatform(platform))
  115. .withText(text)
  116. .withMedia(image)
  117. .setCallback(new UMShareListener() {
  118. @Override
  119. public void onStart(SHARE_MEDIA share_media) {
  120. //分享开始的回调
  121. }
  122.  
  123. @Override
  124. public void onResult(SHARE_MEDIA share_media) {
  125. resultCallback.invoke("分享成功");
  126. }
  127.  
  128. @Override
  129. public void onError(SHARE_MEDIA share_media, Throwable throwable) {
  130. resultCallback.invoke("分享失败:" + throwable.getMessage());
  131. }
  132.  
  133. @Override
  134. public void onCancel(SHARE_MEDIA share_media) {
  135. resultCallback.invoke("取消分享");
  136. }
  137. })
  138. .share();
  139. }
  140. });
  141. //new ShareAction(ShareActivity.this).withText(text).share();
  142. }
  143.  
  144. /**
  145. * 分享纯图片
  146. * @param url
  147. * @param platform
  148. * @param resultCallback
  149. */
  150. @ReactMethod
  151. public void shareImage(String url,final int platform,
  152. final Callback resultCallback) {
  153. final UMImage image = new UMImage(mActivity, url);//网络图片
  154. runOnMainThread(new Runnable() {
  155. @Override
  156. public void run() {
  157. new ShareAction(mActivity)
  158. .setPlatform(getSharePlatform(platform))
  159. .withMedia(image)
  160. .setCallback(new UMShareListener() {
  161. @Override
  162. public void onStart(SHARE_MEDIA share_media) {
  163. //分享开始的回调
  164. }
  165.  
  166. @Override
  167. public void onResult(SHARE_MEDIA share_media) {
  168. resultCallback.invoke("分享成功");
  169. }
  170.  
  171. @Override
  172. public void onError(SHARE_MEDIA share_media, Throwable throwable) {
  173. resultCallback.invoke("分享失败:" + throwable.getMessage());
  174. }
  175.  
  176. @Override
  177. public void onCancel(SHARE_MEDIA share_media) {
  178. resultCallback.invoke("取消分享");
  179. }
  180. })
  181. .share();
  182. }
  183. });
  184. // new ShareAction(ShareActivity.this).withMedia(image).share();
  185. }
  186.  
  187. private SHARE_MEDIA getSharePlatform(int platform){
  188. switch (platform) {
  189. case 0:
  190. return SHARE_MEDIA.QQ;
  191. case 1:
  192. return SHARE_MEDIA.SINA;
  193. case 2:
  194. return SHARE_MEDIA.WEIXIN;
  195. case 3:
  196. return SHARE_MEDIA.WEIXIN_CIRCLE;
  197. case 4:
  198. return SHARE_MEDIA.QZONE;
  199. case 5:
  200. return SHARE_MEDIA.FACEBOOK;
  201. default:
  202. return null;
  203. }
  204. }
  205.  
  206. @Override
  207. public void onActivityResult(Activity activity, int requestCode, int resultCode, Intent data) {
  208. UMShareAPI.get(mActivity).onActivityResult(requestCode, resultCode, data);
  209. }
  210.  
  211. @Override
  212. public void onNewIntent(Intent intent) {
  213.  
  214. }
  215. }

ios部分:

sharemodule.m完整代码:

  1. //
  2. // share.m
  3. // Created by song on 2017/7/7.
  4.  
  5. #import "sharemodule.h"
  6.  
  7. #import <React/RCTBridgeModule.h>
  8. #import <UMSocialCore/UMSocialCore.h>
  9. #import <UMSocialCore/UMSocialManager.h>
  10.  
  11. @implementation sharemodule
  12.  
  13. RCT_EXPORT_MODULE(sharemodule)
  14. RCT_EXPORT_METHOD(share:(NSString*)title descr:(NSString*)descr
  15. webpageUrl:(NSString*)webpageUrl
  16. thumbURL:(NSString*)thumbURLl
  17. NSInteger:(NSInteger)platformType
  18. callback:(RCTResponseSenderBlock)callback
  19. )
  20. {
  21. //创建分享消息对象
  22. UMSocialMessageObject *messageObject = [UMSocialMessageObject messageObject];
  23. //创建网页内容对象
  24. NSString* thumbURL = thumbURLl;
  25. UMShareWebpageObject *shareObject = [UMShareWebpageObject shareObjectWithTitle:title descr:descr thumImage:thumbURL];
  26. //设置网页地址
  27. shareObject.webpageUrl = webpageUrl;
  28. //分享消息对象设置分享内容对象
  29. messageObject.shareObject = shareObject;
  30.  
  31. UMSocialPlatformType type = UMSocialPlatformType_Sina ;
  32.  
  33. switch (platformType) {
  34. case 0:
  35. type = UMSocialPlatformType_QQ;
  36. break;
  37. case 1:
  38. type = UMSocialPlatformType_Sina;
  39. break;
  40. case 2:
  41. type = UMSocialPlatformType_WechatSession;
  42. break;
  43. case 3:
  44. type = UMSocialPlatformType_WechatTimeLine;
  45. break;
  46. case 4:
  47. type = UMSocialPlatformType_Qzone;
  48. break;
  49. case 5:
  50. type = UMSocialPlatformType_Facebook;
  51. break;
  52. default:
  53. break;
  54. }
  55.  
  56. dispatch_async(dispatch_get_main_queue(), ^{
  57. //调用分享接口
  58. [[UMSocialManager defaultManager] shareToPlatform:type messageObject:messageObject currentViewController:nil completion:^(id data, NSError *error) {
  59. NSString *message = @"分享成功";
  60. if (error) {
  61. UMSocialLogInfo(@"************Share fail with error %@*********",error);
  62. if(error.code == 2009){
  63. message = @"取消分享";
  64. }else{
  65. message = @"分享失败";
  66. }
  67. }else{
  68. if ([data isKindOfClass:[UMSocialShareResponse class]]) {
  69. UMSocialShareResponse *resp = data;
  70. //分享结果消息
  71. UMSocialLogInfo(@"response message is %@",resp.message);
  72. //第三方原始返回的数据
  73. UMSocialLogInfo(@"response originalResponse data is %@",resp.originalResponse);
  74. // code = @"200";
  75. // message = resp.originalResponse;
  76. }else{
  77. UMSocialLogInfo(@"response data is %@",data);
  78. }
  79.  
  80. }
  81. callback( [[NSArray alloc] initWithObjects:message, nil]);
  82. }];
  83.  
  84. });
  85. }
  86. //分享文本
  87. RCT_EXPORT_METHOD(shareText:(NSString*)text
  88. thumbURL:(NSString*)thumbURLl
  89. NSInteger:(NSInteger)platformType
  90. callback:(RCTResponseSenderBlock)callback
  91. )
  92. {
  93. //创建分享消息对象
  94. UMSocialMessageObject *messageObject = [UMSocialMessageObject messageObject];
  95. //设置文本
  96. messageObject.text = text;
  97.  
  98. UMSocialPlatformType type = UMSocialPlatformType_Sina ;
  99. //创建图片内容对象
  100. UMShareImageObject *shareObject = [[UMShareImageObject alloc] init];
  101. //如果有缩略图,则设置缩略图
  102. [shareObject setShareImage:thumbURLl];
  103.  
  104. //分享消息对象设置分享内容对象
  105. messageObject.shareObject = shareObject;
  106. switch (platformType) {
  107. case 0:
  108. type = UMSocialPlatformType_QQ;
  109. break;
  110. case 1:
  111. type = UMSocialPlatformType_Sina;
  112. break;
  113. case 2:
  114. type = UMSocialPlatformType_WechatSession;
  115. break;
  116. case 3:
  117. type = UMSocialPlatformType_WechatTimeLine;
  118. break;
  119. case 4:
  120. type = UMSocialPlatformType_Qzone;
  121. break;
  122. case 5:
  123. type = UMSocialPlatformType_Facebook;
  124. break;
  125. default:
  126. break;
  127. }
  128.  
  129. dispatch_async(dispatch_get_main_queue(), ^{
  130. //调用分享接口
  131. [[UMSocialManager defaultManager] shareToPlatform:type messageObject:messageObject currentViewController:nil completion:^(id data, NSError *error) {
  132. NSString *message = @"分享成功";
  133. if (error) {
  134. UMSocialLogInfo(@"************Share fail with error %@*********",error);
  135. if(error.code == 2009){
  136. message = @"取消分享";
  137. }else{
  138. message = @"分享失败";
  139. }
  140. }else{
  141. if ([data isKindOfClass:[UMSocialShareResponse class]]) {
  142. UMSocialShareResponse *resp = data;
  143. //分享结果消息
  144. UMSocialLogInfo(@"response message is %@",resp.message);
  145. //第三方原始返回的数据
  146. UMSocialLogInfo(@"response originalResponse data is %@",resp.originalResponse);
  147. // code = @"200";
  148. // message = resp.originalResponse;
  149. }else{
  150. UMSocialLogInfo(@"response data is %@",data);
  151. }
  152.  
  153. }
  154. callback( [[NSArray alloc] initWithObjects:message, nil]);
  155. }];
  156.  
  157. });
  158. }
  159. //分享纯图片
  160. RCT_EXPORT_METHOD(shareImage:(NSString*)thumbURLl
  161. NSInteger:(NSInteger)platformType
  162. callback:(RCTResponseSenderBlock)callback
  163. )
  164. {
  165.  
  166. //创建分享消息对象
  167. UMSocialMessageObject *messageObject = [UMSocialMessageObject messageObject];
  168.  
  169. //创建图片内容对象
  170. UMShareImageObject *shareObject = [[UMShareImageObject alloc] init];
  171. //如果有缩略图,则设置缩略图
  172. shareObject.thumbImage = [UIImage imageNamed:@"icon"];
  173. [shareObject setShareImage:@"https://mobile.umeng.com/images/pic/home/social/img-1.png"];
  174.  
  175. //分享消息对象设置分享内容对象
  176. messageObject.shareObject = shareObject;
  177. UMSocialPlatformType type = UMSocialPlatformType_Sina ;
  178. //如果有缩略图,则设置缩略图
  179. [shareObject setShareImage:thumbURLl];
  180.  
  181. //分享消息对象设置分享内容对象
  182. messageObject.shareObject = shareObject;
  183. switch (platformType) {
  184. case 0:
  185. type = UMSocialPlatformType_QQ;
  186. break;
  187. case 1:
  188. type = UMSocialPlatformType_Sina;
  189. break;
  190. case 2:
  191. type = UMSocialPlatformType_WechatSession;
  192. break;
  193. case 3:
  194. type = UMSocialPlatformType_WechatTimeLine;
  195. break;
  196. case 4:
  197. type = UMSocialPlatformType_Qzone;
  198. break;
  199. case 5:
  200. type = UMSocialPlatformType_Facebook;
  201. break;
  202. default:
  203. break;
  204. }
  205.  
  206. dispatch_async(dispatch_get_main_queue(), ^{
  207. //调用分享接口
  208. [[UMSocialManager defaultManager] shareToPlatform:type messageObject:messageObject currentViewController:nil completion:^(id data, NSError *error) {
  209. NSString *message = @"分享成功";
  210. if (error) {
  211. UMSocialLogInfo(@"************Share fail with error %@*********",error);
  212. if(error.code == 2009){
  213. message = @"取消分享";
  214. }else{
  215. message = @"分享失败";
  216. }
  217. }else{
  218. if ([data isKindOfClass:[UMSocialShareResponse class]]) {
  219. UMSocialShareResponse *resp = data;
  220. //分享结果消息
  221. UMSocialLogInfo(@"response message is %@",resp.message);
  222. //第三方原始返回的数据
  223. UMSocialLogInfo(@"response originalResponse data is %@",resp.originalResponse);
  224. // code = @"200";
  225. // message = resp.originalResponse;
  226. }else{
  227. UMSocialLogInfo(@"response data is %@",data);
  228. }
  229.  
  230. }
  231. callback( [[NSArray alloc] initWithObjects:message, nil]);
  232. }];
  233.  
  234. });
  235. }
  236. @end

至此,分享功能暂时告一段落。谢谢各种途径下自己寻求帮助的小伙伴们~

React Native(十五)——RN中的分享功能的更多相关文章

  1. React Native之新架构中的Turbo Module实现原理分析

    有段时间没更新博客了,之前计划由浅到深.从应用到原理,更新一些RN的相关博客.之前陆续的更新了6篇RN应用的相关博客(传送门),后边因时间问题没有继续更新.主要是平时空余时间都用来帮着带娃了,不过还是 ...

  2. 基于React Native的移动平台研发实践分享

    转载:http://blog.csdn.net/haozhenming/article/details/72772787 本文目录: 一.React Native 已经成为了移动前端技术的趋势 二.基 ...

  3. Expo大作战(十五)--expo中splash启动页的详细机制

    简要:本系列文章讲会对expo进行全面的介绍,本人从2017年6月份接触expo以来,对expo的研究断断续续,一路走来将近10个月,废话不多说,接下来你看到内容,讲全部来与官网 我猜去全部机翻+个人 ...

  4. React Native 在现有项目中的探路

    移动开发中,native开发性能和效果上无疑是最好的. 但是在众多的情况下,native开发并不是最优的选择.当需求经常改动的时候,当预算有限的时候,当deadline很近的时候,native开发的成 ...

  5. React Native 系列(五) -- 组件间传值

    前言 本系列是基于React Native版本号0.44.3写的.任何一款 App 都有界面之间数据传递的这个步骤的,那么在RN中,组件间是怎么传值的呢?这篇文章将介绍到顺传.逆传已经通过通知传值. ...

  6. Native、Web App、Hybrid、React Native(简称RN)、Weex 间的异同点。

    App常用开发模式简介 此处App为应用application,并非我们通常讲的手机App. 常用的几种APP开发模式-脑图 Native App 传统的原生App开发模式,有iOS和aOS两大系统, ...

  7. React Native 系列(五)

    前言 本系列是基于React Native版本号0.44.3写的.任何一款 App 都有界面之间数据传递的这个步骤的,那么在RN中,组件间是怎么传值的呢?这篇文章将介绍到顺传.逆传已经通过通知传值. ...

  8. react native的环境搭建中常见问题

    搭建完成android的环境,我们就可以继续我们的react native环境的搭建了. 当然,按照fb的安装流程来完成rn的搭建. http://facebook.github.io/react-n ...

  9. react第十五单元(react路由的封装,以及路由数据的提取)

    第十五单元(react路由的封装,以及路由数据的提取) #课程目标 熟悉react路由组件及路由传参,封装路由组件能够处理路由表 对多级路由能够实现封装通用路由传递逻辑,实现多级路由的递归传参 对复杂 ...

随机推荐

  1. Spring Boot Druid数据源配置

    package com.hgvip.config; import com.alibaba.druid.pool.DruidDataSource; import com.alibaba.druid.su ...

  2. 移动web开发之rem的使用

    为什么要使用rem 移动端设备尺寸五花八门,单纯使用px这个单位无法轻易适配,rem就可以为我们解决这个问题! 如何使用rem 1rem默认等于16px,这是因为页面的默认字体大小就是16px.r 代 ...

  3. tomcat超时、内存不足

    1.Tomcat 启动超过45s启动失败,报超时错误 可以Eclipse 下Tomcat中扩大tomcat启动时间,默认为45 ,修改为245 2 . tomcat启动内存不足 Run - Run C ...

  4. 201621123060《JAVA程序设计》第二周学习总结

    1.本周学习总结 本周学习了JAVA中的引用类.包装类(学习了一种语法:自动装箱)和数组(遍历数组的新方法foreach循环). 2. 书面作业 1.String-使用Eclipse关联jdk源代码 ...

  5. 冲刺No.4

    Alpha冲刺第四天 站立式会议 项目进展 今日团队开始对项目的核心功能中的事务管理员模块与学生模块进行了编码,主要内容是对学生基本信息的增删改与事务管理员信息的增删改,这部分的内容是整个项目最基础的 ...

  6. django获取ip与数据重复性判定

    获取ip if request.META.has_key('HTTP_X_FORWARDED_FOR'): ip_c = request.META['HTTP_X_FORWARDED_FOR'] el ...

  7. io多路复用(一)

    sever端 1 import socket sk1 = socket.socket() sk1.bind(('127.0.0.1',8001,)) sk1.listen() sk2 = socket ...

  8. 点击tableViewCell,调用打电话的功能

    对于点击tableViewCell,调用打电话的功能,按照一般的方法,使用Appdelegate的OpenUrl的方法,使用前先使用UIAlertView展示,让用户选择是否拨打,但是发现了个简单的方 ...

  9. bzoj千题计划251:bzoj3672: [Noi2014]购票

    http://www.lydsy.com/JudgeOnline/problem.php?id=3672 法一:线段树维护可持久化单调队列维护凸包 斜率优化DP 设dp[i] 表示i号点到根节点的最少 ...

  10. JAVA_SE基础——68.RunTime类

    RunTime类代表Java程序的运行时环境,每一个Java程序都有一个与之对应的Runtime实例,应用程序通过该对象与运行时环境相连,应用程序不能创建自己的Runtime实例,但可以通过getRu ...