React Native(十五)——RN中的分享功能
终于，终于，可以总结自己使用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中的分享功能的更多相关文章
- React Native之新架构中的Turbo Module实现原理分析
有段时间没更新博客了,之前计划由浅到深.从应用到原理,更新一些RN的相关博客.之前陆续的更新了6篇RN应用的相关博客(传送门),后边因时间问题没有继续更新.主要是平时空余时间都用来帮着带娃了,不过还是 ...
- 基于React Native的移动平台研发实践分享
转载:http://blog.csdn.net/haozhenming/article/details/72772787 本文目录: 一.React Native 已经成为了移动前端技术的趋势 二.基 ...
- Expo大作战(十五)--expo中splash启动页的详细机制
简要:本系列文章讲会对expo进行全面的介绍,本人从2017年6月份接触expo以来,对expo的研究断断续续,一路走来将近10个月,废话不多说,接下来你看到内容,讲全部来与官网 我猜去全部机翻+个人 ...
- React Native 在现有项目中的探路
移动开发中,native开发性能和效果上无疑是最好的. 但是在众多的情况下,native开发并不是最优的选择.当需求经常改动的时候,当预算有限的时候,当deadline很近的时候,native开发的成 ...
- React Native 系列(五) -- 组件间传值
前言 本系列是基于React Native版本号0.44.3写的.任何一款 App 都有界面之间数据传递的这个步骤的,那么在RN中,组件间是怎么传值的呢?这篇文章将介绍到顺传.逆传已经通过通知传值. ...
- Native、Web App、Hybrid、React Native（简称RN）、Weex 间的异同点。
App常用开发模式简介 此处App为应用application,并非我们通常讲的手机App. 常用的几种APP开发模式-脑图 Native App 传统的原生App开发模式,有iOS和aOS两大系统, ...
- React Native 系列(五)
前言 本系列是基于React Native版本号0.44.3写的.任何一款 App 都有界面之间数据传递的这个步骤的,那么在RN中,组件间是怎么传值的呢?这篇文章将介绍到顺传.逆传已经通过通知传值. ...
- react native的环境搭建中常见问题
搭建完成android的环境,我们就可以继续我们的react native环境的搭建了. 当然,按照fb的安装流程来完成rn的搭建. http://facebook.github.io/react-n ...
- react第十五单元(react路由的封装，以及路由数据的提取)
第十五单元(react路由的封装,以及路由数据的提取) #课程目标 熟悉react路由组件及路由传参,封装路由组件能够处理路由表 对多级路由能够实现封装通用路由传递逻辑,实现多级路由的递归传参 对复杂 ...
随机推荐
- SpringBoot集成redis的key,value序列化的相关问题
使用的是maven工程 springBoot集成redis默认使用的是注解,在官方文档中只需要2步; 1.在pom文件中引入即可 <dependency> <groupId>o ...
- PHP 设计模式阅读清单
社区文章推荐 S.O.L.I.D 面向对象设计和编程(OOD&OOP)笔记 浅谈 Laravel 设计模式 PHP 完整实战 23 种设计模式 Laravel Dependency Injec ...
- python全栈开发-Day9 函数对象、函数嵌套、名称空间与作用域
一 .函数对象 一 .函数是第一类对象,即函数可以当作数据传递 可以被引用 可以当作参数传递 返回值可以是函数 可以当作容器类型的元素 二. 利用该特性,优雅的取代多分支的if def foo(): ...
- MySQL_执行计划详细说明
1 简要说明 id 表格查询的顺序编号. 降序查看,id相同的从上到下查查看. id可以为null ,当table为( union ,m,n )类型的时候,id为null,这个时候,id的 ...
- [高级软件工程教学]团队Alpha阶段成绩汇总
一.作业地址: https://edu.cnblogs.com/campus/fzu/AdvancedSoftwareEngineering/homework/1408 https://edu.cnb ...
- 【iOS】单元测试
iOS单元测试(作用及入门提升) 字数1704 阅读16369 评论26 喜欢247 由于只是一些简单实用的东西,学学还是挺不错的.其实单元测试用的好,开发起来也会快很多.单元测试对于我目前来说,就是 ...
- 《高级软件测试》JIRA使用手册（一）JIRA基本情况
JIRA 官方网站为:https://www.atlassian.com/software/jira 中文代理网站为:https://www.jira.cn 现版本:v7.3.0 Atlassian公 ...
- Scala 对象
1. 单例对象 对于任何你在Java中会使用单例对象的地方, 在scala中都可以使用对象来实现; scala字段没有静态方法或者静态字段, 可以使用object语法结构达到同样的效果,对象(obje ...
- python基础学习篇章一
一. 对Python的认识 1. Python的标准实现方式是将源代码的语句编译为字节码的形式,之后再将字节码解释出来.由于字节码是一种与平台无关的形式,字节码具有可移植性.但是Python没有将代码 ...
- 爬虫小探-Python3 urllib.request获取页面数据
使用Python3 urllib.request中的Requests()和urlopen()方法获取页面源码,并用re正则进行正则匹配查找需要的数据. #forex.py#coding:utf-8 ' ...