终于,终于,可以总结自己使用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完整代码:

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部分:

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

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

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. 浅谈 JSON.stringify 方法

    一.前言 最近项目中,遇到需要将对象转换成字符串进行传递,上次写过一篇文章关于json字符串转换成json对象,json对象转换成字符串,值转换成字符串,字符串转成值.当时主要是用在有时候处理字符串和 ...

  2. bug单的生命周期

    测试工程师发现了软件的缺陷(bug),那修复bug的整个流程是怎么样的呢? 1.发现bug 2.和开发确认是否是bug 3.如果是bug则提bug单到测试经理,如果不是则放过 4.测试经理把bug单走 ...

  3. spring学习笔记二 注解及AOP

    本节需要导入spring-aop包 注解 使用注解的目的是为了代替配置,在使用注解时,省略键时,则是为value赋值. 扫描某个包下的所有类中的注解 <?xml version="1. ...

  4. MySQL之连接查询

    主要是多表查询和连接查询

  5. IIS 错误代码

    错误码: 1.HTTP 1xx-信息提示 这些状态代码表示临时的响应.客户端在收到常规响应之前,应准备接收一个或多个1xx响应. 100-继续. 101-切换协议. 2xx-成功 这类状态代码表明服务 ...

  6. 20155227 实现mypwd

    20155227 实现mypwd 1 学习pwd命令 2 研究pwd实现需要的系统调用(man -k; grep),写出伪代码 3 实现mypwd 4 测试mypwd 课堂学习笔记 实现mypwd 在 ...

  7. 2018C程序设计—第0次作业

    1.翻阅邹欣老师博客关于师生关系博客,并回答下列问题,每个问题的答案不少于500字 1)最理想的师生关系是健身教练和学员的关系,在这种师生关系中你期望获得来自老师的哪些帮助? 答:正如邹欣老师博客里所 ...

  8. mvc架构模式概念

    MVC模式是"Model-View-Controller"的缩写,中文翻译为"模式-视图-控制器".MVC应用程序总是由这三个部分组成.Event(事件)导致C ...

  9. 2017 清北济南考前刷题Day 4 afternoon

    期望得分:30+50+30=110 实际得分:40+0+0=40 并查集合并再次写炸... 模拟更相减损术的过程 更相减损术,差一定比被减数小,当被减数=减数时,停止 对于同一个减数来说,会被减 第1 ...

  10. Python 迭代器之列表解析

     [TOC] 尽管while和for循环能够执行大多数重复性任务, 但是由于序列的迭代需求如此常见和广泛, 以至于Python提供了额外的工具以使其更简单和高效. 迭代器在Python中是以C语言的 ...