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路由组件及路由传参,封装路由组件能够处理路由表 对多级路由能够实现封装通用路由传递逻辑,实现多级路由的递归传参 对复杂 ...
随机推荐
- Spark单机版集群
一.创建用户 # useradd spark # passwd spark 二.下载软件 JDK,Scala,SBT,Maven 版本信息如下: JDK jdk-7u79-linux-x64.gz S ...
- 【Saltstack】Saltstack简单说明
[Saltstack] Saltstack是一个服务器集中管理中心平台,可以帮助管理员轻松的对若干台服务器进行统一操作.类似的工具还有Ansible,Puppet,func等等.相比于这些工具,sal ...
- 听翁恺老师mooc笔记(12)--结构中的结构
结构数组: 和C语言中的int,double一样,一旦我们做出一个结构类型,就可以定义这个结构类型的变量,也可以定义这个结构类型的数组.比如下面这个例子: struct date dates[100] ...
- 2017-2018-1 Java演绎法 第二周 作业
团队任务:讨论Android上的游戏软件 参考现代软件工程 第一章 [概论]练习与讨论: 软件有很多种,也有各种分类办法,本次团队任务是讨论选取Android上的一个游戏软件,考虑到每位组员接触的游戏 ...
- scrapy 模拟登陆
import scrapy import urllib.request from scrapy.http import Request,FormRequest class LoginspdSpider ...
- OSI七层协议模型、TCP/IP四层模型学习笔记
1. OSI七层和TCP/IP四层的关系 1.1 OSI引入了服务.接口.协议.分层的概念,TCP/IP借鉴了OSI的这些概念建立TCP/IP模型. 1.2 OSI先有模型,后有协议,先有标准,后进行 ...
- mint-ui在vue中的使用。
首先放上mint-ui中文文档 近来在使用mint-ui,发现部分插件在讲解上并不是很详细,部分实例找不到使用的代码.github上面的分享,里面都是markdown文件,内容就是网上的文档 刚好自己 ...
- 外网访问本地服务器下的web应用
让本地服务器可以在外网访问的方式有很多,介绍其中一种: 由于本人是在自己电脑上装了一个虚拟机, 测试环境为:虚拟机作为服务器,服务器中装了一个禅道,虚拟机IP192.168.2.221,本人通过tpl ...
- ASP.NET 访问项目网站以外的目录文件
简单的说,可以通过在 IIS 添加虚拟目录的方法做到,获取访问路径的时候就用 HttpContext.Current.Server.MapPath("~/xxx"); 的方式. 下 ...
- 深度爬取之rules
深度爬取之rules CrawlSpider使用rules来决定爬虫的爬取规则,并将匹配后的url请求提交给引擎.所以在正常情况下,CrawlSpider不需要单独手动返回请求了. 在rules中包含 ...