react native一键分享功能实现&原理和注意点(支持微信、qq、新浪微博等)

简介:

前言

目前使用一键分享比较主流的两个SDK:ShareSDK、友盟;

又因为友盟功能比较多且比较全,比如说友盟统计、友盟推送等,所以本文重点介绍的是友盟分享功能在rn上的应用以及要注意的点。

 

react native绑定SDK两种方案(一个原理):

  1.自己去要绑定的SDK官网下载SDK包,按照SDK安装指南分别在android/iOS上按步骤配置,然后在RN注册Package和Module实现RN和原生之间的通讯;

  2.使用别人已经写过的Package和Module+SDK本身的配置,直接拿到rn项目中用;

总结:可以看出来第二种其实是比较偷懒的方式,但是可以实现功能,而且Package和Module的书写几乎一样都是大同小异的代码(除了Module暴露调用方法的顺序不同之外),所以如果市面上已经有相应的绑定大可直接拿来使用。

 

一键分享实现方案

我们本文要使用的友盟分享库是:react-native-share 

GitHub地址:https://github.com/songxiaoliang/react-native-share

配置详见上面GitHub里README部分,这里不在重复,本文重点要说的是注意事项。

 

注意事项(Android部分)

除了上文GitHub里面的10个步骤之后,接下来的配置也是必不可少的.

1.需要在app目录build.gradle文件dependencies里面添加如下配置:

复制代码
dependencies {
    ...
  //友盟分享
  compile files('libs/weiboSDKCore_3.1.4.jar')
  compile files('libs/wechat-sdk-android-with-mta-1.1.6.jar')
  compile files('libs/umeng_social_tool.jar')
  compile files('libs/umeng_social_net.jar')
  compile files('libs/umeng_social_api.jar')
  compile files('libs/SocialSDK_WeiXin_Full.jar')
  compile files('libs/SocialSDK_Sina_Full.jar')
  compile files('libs/SocialSDK_facebook.jar')
  compile files('libs/SocialSDK_QQ_Full.jar')
  compile files('libs/SocialSDK_alipay.jar')
  compile files('libs/open_sdk_r5781.jar')
  compile files('libs/libapshare.jar')
  compile 'com.android.support:multidex:'
}
复制代码

2.需要注意修改apshare、module、wxapi、WBShareActivity.java里面的包名改成自己项目的包名;

3.MainActivity.java需要添加引用:

import com.umeng.analytics.MobclickAgent;
import android.content.Intent;
import android.os.Bundle;
import com.umeng.socialize.UMShareAPI;

4.MainApplication.java需要添加引用:

import com.xxx.module.SharePackage;  //xxx为你的包名
import com.umeng.socialize.Config;
import com.umeng.socialize.PlatformConfig;
import com.umeng.socialize.UMShareAPI;

5.以上配置完毕,运行依然报错“com.android.dex.DexIndexOverflowException: method ID not in [0, 0xffff]: 65935”

解决方案:

①.在项目的build.gradle文件的dependencies 节中添加分包设置:

dependencies { 
   ... 
   compile 'com.android.support:multidex:' 
   ... 
}

②.通过在defaultConfig节中设置multiDexEnabled标签为true,开启multi-dexing支持.

defaultConfig { 
    ... 
    multiDexEnabled true 
    ... 
}

 



本文转自王磊的博客博客园博客,原文链接:http://www.cnblogs.com/vipstone/p/7884997.html,如需转载请自行联系原作者

目录
相关文章
|
1月前
|
JSON 缓存 前端开发
【React】React原理面试题集锦
本文集合一些React的原理面试题,方便读者以后面试查漏补缺。作者给出自认为可以让面试官满意的简易答案,如果想要了解更深刻,可以点击链接查看对应的详细博文。在此对链接中的博文作者非常感谢🙏。
34 0
|
2月前
|
开发框架 前端开发 JavaScript
探索前端开发中的跨平台框架React Native
本文将介绍前端开发中一种备受关注的跨平台框架React Native,通过比较原生应用与React Native的优缺点,探讨其在实际项目中的应用以及未来发展趋势。
|
2月前
|
开发框架 前端开发 JavaScript
从零开始学习React Native开发
React Native是一种基于React框架的移动端开发框架,使用它可以快速地构建出高性能、原生的移动应用。本文将从零开始,介绍React Native的基础知识和开发流程,帮助读者快速入门React Native开发,并实现一个简单的ToDo应用程序。
|
3月前
|
存储 资源调度 前端开发
React原理 即 React路由基础
React原理 即 React路由基础
49 1
|
3月前
|
前端开发 JavaScript Android开发
跨端技术栈综合考察:深入剖析 UniApp、Flutter、Taro 和 React Native 的优势与限制
跨端技术栈综合考察:深入剖析 UniApp、Flutter、Taro 和 React Native 的优势与限制
|
14天前
|
前端开发 JavaScript 算法
React原理
【4月更文挑战第4天】本文介绍了React的核心概念,包括jsx、React.createElement和fiber。jsx是React的语法糖,被转换为React.createElement生成虚拟DOM (vDOM)以优化性能。vDOM是轻量的数据结构,用于描述DOM状态。React通过fiber结构改进渲染性能,将同步任务拆分成小任务,利用requestIdleCallback在浏览器空闲时执行,确保流畅的用户体验。fiber是增强的vDOM,包含额外的引用指针。文章还提及了diff算法和hooks在React中的作用。
9 0
|
27天前
|
前端开发 NoSQL 数据库
设计 QQ、微信等第三方账号登陆
设计 QQ、微信等第三方账号登陆
17 0
设计 QQ、微信等第三方账号登陆
|
2月前
|
前端开发 JavaScript
前端框架React原理
前端框架React原理
29 0
|
2月前
|
前端开发 JavaScript API
介绍一下React Router的工作原理。
介绍一下React Router的工作原理。
31 5
|
2月前
|
存储 前端开发 JavaScript
从零开始学习React Native开发
【2月更文挑战第1天】React Native是一种跨平台的移动应用程序框架,可以使用JavaScript和React来构建Android和iOS应用程序。本文将带您从零开始学习React Native开发,涵盖了基础知识、组件、样式、布局、API等方面。

相关实验场景

更多