首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

React Native第三方平台分享的实例（Android，IOS双平台）

Posted in Javascript onAugust 04, 2017

本文主要介绍了React Native第三方平台分享的实例（Android，IOS双平台），分享给大家，具体如下：

源码已开源到Github，地址请点击：react-native-share 【一行代码，双平台分享】

目前支持分享的平台有【QQ】【QQ空间】【微信】【朋友圈】【微博】【FaceBook】  欢迎大家star，fork.....

【 Android平台配置 】

1. app目录下创建 libs 文件夹，添加依赖文件【直接复制源码中 libs 目录即可】

2. app / src / main 目录下创建 jniLibs 目录，添加JNI文件【直接复制源码中 jniLibs 目录即可】

3. 包名目录下，引入所需交互代码【直接复制源码中 apshare、wxapi 、 WBShareActivity 、module 即可，注意import的路径是否正确】

4. 在AndroidMainfest.xml文件下添加权限【直接复制源码即可】

<uses-permission android:name="android.permission.INTERNET" /> 
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> 
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" /> 
<uses-permission android:name="android.permission.READ_PHONE_STATE" /> 
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/> 
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/> 
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /> 
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" /> 
<uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />

5. 在AndroidMainfest.xml文件下的 <application></application>中添加分享平台【直接复制源码即可】

<activity 
  android:name=".WBShareActivity" 
  android:configChanges="keyboardHidden|orientation" 
  android:screenOrientation="portrait" > 
  <intent-filter> 
    <action android:name="com.sina.weibo.sdk.action.ACTION_SDK_REQ_ACTIVITY" /> 
    <category android:name="android.intent.category.DEFAULT" /> 
  </intent-filter> 
</activity> 
<activity 
  android:name="com.sina.weibo.sdk.component.WeiboSdkBrowser" 
  android:configChanges="keyboardHidden|orientation" 
  android:windowSoftInputMode="adjustResize" 
  android:exported="false" > 
</activity> 
<service android:name="com.sina.weibo.sdk.net.DownloadService" 
  android:exported="false"></service> 
<activity 
  android:name=".wxapi.WXEntryActivity" 
  android:configChanges="keyboardHidden|orientation|screenSize" 
  android:exported="true" 
  android:screenOrientation="portrait" 
  android:theme="@android:style/Theme.Translucent.NoTitleBar" /> 
<activity 
  android:name="com.tencent.tauth.AuthActivity" 
  android:launchMode="singleTask" 
  android:noHistory="true" > 
 
  <intent-filter> 
    <action android:name="android.intent.action.VIEW" /> 
    <category android:name="android.intent.category.DEFAULT" /> 
    <category android:name="android.intent.category.BROWSABLE" /> 
    <data android:scheme="tencent100424468" /> <= 改为自己申请的QQkey 
  </intent-filter> 
</activity> 
<activity 
  android:name="com.tencent.connect.common.AssistActivity" 
  android:screenOrientation="portrait" 
  android:theme="@android:style/Theme.Translucent.NoTitleBar" 
  android:configChanges="orientation|keyboardHidden|screenSize"/> 
<activity 
  android:name=".apshare.ShareEntryActivity" 
  android:configChanges="keyboardHidden|orientation|screenSize" 
  android:exported="true" 
  android:screenOrientation="portrait" 
  android:theme="@android:style/Theme.Translucent.NoTitleBar" /> 
<meta-data 
  android:name="UMENG_APPKEY" 
  android:value="561cae6ae0f55abd990035bf" >  <= 改为自己申请的友盟Key 
</meta-data>

6. 使用【keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000】生成签名文件，并将签名文件放入app目录

7. 在gradle.properties文件下，添加签名信息【直接复制源码即可】

MYAPP_RELEASE_STORE_FILE=my-release-key.keystore 
 MYAPP_RELEASE_KEY_ALIAS=my-key-alias 
 MYAPP_RELEASE_STORE_PASSWORD=123456（填写自己设置的密码） 
 MYAPP_RELEASE_KEY_PASSWORD=123456 （填写自己设置的密码）

8. 在app / build.gradle 文件下的添加签名配置【直接复制源码即可】

android {   
  ...   
  defaultConfig {   
   ...   
  }   
  signingConfigs {   
   release {   
     storeFile file(MYAPP_RELEASE_STORE_FILE)   
     storePassword MYAPP_RELEASE_STORE_PASSWORD   
     keyAlias MYAPP_RELEASE_KEY_ALIAS   
     keyPassword MYAPP_RELEASE_KEY_PASSWORD   
   }   
  }   
  buildTypes {   
   release {   
    ...   
   signingConfig signingConfigs.release   
   }   
  }  
 }

9. 在MainApplication中初始化分享【直接复制源码即可】

@Override 
protected List<ReactPackage> getPackages() { 
 return Arrays.<ReactPackage>asList( 
   new MainReactPackage(), 
     new SharePackage() <= 添加引用 
 ); 
}
@Override 
public void onCreate() { 
 super.onCreate(); 
 SoLoader.init(this,false); 
 Config.shareType = "react native"; 
 UMShareAPI.get(this); 
} 
 
// 配置平台 
{ 
 PlatformConfig.setWeixin("wx083bf496cbc48aec", "750e9075fa521c82274a9d548c399825"); 
 PlatformConfig.setQQZone("1106207359", "3JjbG8aXMuh5w0sV"); 
 PlatformConfig.setSinaWeibo("2733400964", "fac50980a44e3e3afd4bc968ea572887", "www.baidu.com"); 
}

10. 在MainActivity中初始化分享回调【直接复制源码即可】

@Override 
 protected void onCreate(Bundle savedInstanceState) { 
   super.onCreate(savedInstanceState); 
   ShareModule.initActivity(this); 
 }

 【 iOS平台配置 】

1. 将源码中 ios 目录下的UMSocial添加到工程，直接拖进即可

2. 选择TARGET下的项目，在Build Setting下找到Other Linker Flags加入-ObjC ，注意不要写为-Objc

3. 加入U-Share SDK依赖的系统库

React Native第三方平台分享的实例（Android，IOS双平台）

依次添加如下依赖：

SystemConfiguration.framework
CoreGraphics.framework
CoreTelephony.framework
ImageIO.framework
libsqlite3.tbd
libc++.tbd
libz.tbd

4. 在Info.plist文件下配置SSO白名单【直接复制即可】

<key>LSApplicationQueriesSchemes</key> 
<array> 
  <!-- 微信 URL Scheme 白名单--> 
  <string>wechat</string> 
  <string>weixin</string> 
 
  <!-- 新浪微博 URL Scheme 白名单--> 
  <string>sinaweibohd</string> 
  <string>sinaweibo</string> 
  <string>sinaweibosso</string> 
  <string>weibosdk</string> 
  <string>weibosdk2.5</string> 
 
  <!-- QQ、Qzone、TIM URL Scheme 白名单--> 
  <string>mqqapi</string> 
  <string>mqq</string> 
  <string>mqqOpensdkSSoLogin</string> 
  <string>mqqconnect</string> 
  <string>mqqopensdkdataline</string> 
  <string>mqqopensdkgrouptribeshare</string> 
  <string>mqqopensdkfriend</string> 
  <string>mqqopensdkapi</string> 
  <string>mqqopensdkapiV2</string> 
  <string>mqqopensdkapiV3</string> 
  <string>mqqopensdkapiV4</string> 
  <string>mqzoneopensdk</string> 
  <string>wtloginmqq</string> 
  <string>wtloginmqq2</string> 
  <string>mqqwpa</string> 
  <string>mqzone</string> 
  <string>mqzonev2</string> 
  <string>mqzoneshare</string> 
  <string>wtloginqzone</string> 
  <string>mqzonewx</string> 
  <string>mqzoneopensdkapiV2</string> 
  <string>mqzoneopensdkapi19</string> 
  <string>mqzoneopensdkapi</string> 
  <string>mqqbrowser</string> 
  <string>mttbrowser</string> 
  <string>tim</string> 
  <string>timapi</string> 
  <string>timopensdkfriend</string> 
  <string>timwpa</string> 
  <string>timgamebindinggroup</string> 
  <string>timapiwallet</string> 
  <string>timOpensdkSSoLogin</string> 
  <string>wtlogintim</string> 
  <string>timopensdkgrouptribeshare</string> 
  <string>timopensdkapiV4</string> 
  <string>timgamebindinggroup</string> 
  <string>timopensdkdataline</string> 
  <string>wtlogintimV1</string> 
  <string>timapiV1</string> 
  <!-- Facebook URL Scheme 白名单--> 
  <string>fbapi</string> 
  <string>fb-messenger-api</string> 
  <string>fbauth2</string> 
  <string>fbshareextension</string> 
</array>

5. 配置URL Scheme

React Native第三方平台分享的实例（Android，IOS双平台）

微信 微信appKey wxdc1e388c3822c80b  
QQ/Qzone/TIM 需要添加两项URL Scheme： 1、"tencent"+腾讯QQ互联应用appID 2、“QQ”+腾讯QQ互联应用appID转换成十六进制（不足8位前面补0） 如appID：100424468 1、tencent100424468  2、QQ05fc5b14 QQ05fc5b14为100424468转十六进制而来，因不足8位向前补0，然后加"QQ"前缀
新浪微博 “wb”+新浪appKey wb3921700954

6.在AppDelegate.m中初始化U-Share及第三方平台

（1）引入头文件: #import<UMSocialCore/UMSocialCore.h>【直接复制即可】

（2）launchOptions中设置友盟Key【直接复制即可】

/* 打开调试日志 */ 
[[UMSocialManager defaultManager] openLog:YES]; 
 
/* 设置友盟appkey */ 
[[UMSocialManager defaultManager] setUmSocialAppkey:USHARE_DEMO_APPKEY]; 
 
[self configUSharePlatforms]; 
 
[self confitUShareSettings];

（3）在AppDelegate.m文件下添加如下代码，配置第三方平台【直接复制即可】

launchOptions:

/* 打开调试日志 */ 
[[UMSocialManager defaultManager] openLog:YES]; 
 
/* 设置友盟appkey */ 
[[UMSocialManager defaultManager] setUmSocialAppkey:@"59783b11f29d981b2f000984"]; 
 
[self configUSharePlatforms]; 
 
[self confitUShareSettings];
- (void)confitUShareSettings 
{ 
 /* 
  * 打开图片水印 
  */ 
 //[UMSocialGlobal shareInstance].isUsingWaterMark = YES; 
  
 /* 
  * 关闭强制验证https，可允许http图片分享，但需要在info.plist设置安全域名 
  <key>NSAppTransportSecurity</key> 
  <dict> 
  <key>NSAllowsArbitraryLoads</key> 
  <true/> 
  </dict> 
  */ 
 [UMSocialGlobal shareInstance].isUsingHttpsWhenShareContent = NO; 
  
}
- (void)configUSharePlatforms 
{ 
  /* 
   设置微信的appKey和appSecret 
   [微信平台从U-Share 4/5升级说明]http://dev.umeng.com/social/ios/%E8%BF%9B%E9%98%B6%E6%96%87%E6%A1%A3#1_1 
   */ 
  [[UMSocialManager defaultManager] setPlaform:UMSocialPlatformType_WechatSession appKey:@"wxdc1e388c3822c80b" appSecret:@"3baf1193c85774b3fd9d18447d76cab0" redirectURL:nil]; 
  /* 
   * 移除相应平台的分享，如微信收藏 
   */ 
  //[[UMSocialManager defaultManager] removePlatformProviderWithPlatformTypes:@[@(UMSocialPlatformType_WechatFavorite)]]; 
 
  /* 设置分享到QQ互联的appID 
   * U-Share SDK为了兼容大部分平台命名，统一用appKey和appSecret进行参数设置，而QQ平台仅需将appID作为U-Share的appKey参数传进即可。 
   100424468.no permission of union id 
   [QQ/QZone平台集成说明]http://dev.umeng.com/social/ios/%E8%BF%9B%E9%98%B6%E6%96%87%E6%A1%A3#1_3 
  */ 
  [[UMSocialManager defaultManager] setPlaform:UMSocialPlatformType_QQ appKey:@"1105821097"/*设置QQ平台的appID*/ appSecret:nil redirectURL:@"http://mobile.umeng.com/social"]; 
 
  /* 
   设置新浪的appKey和appSecret 
   [新浪微博集成说明]http://dev.umeng.com/social/ios/%E8%BF%9B%E9%98%B6%E6%96%87%E6%A1%A3#1_2 
   */ 
  [[UMSocialManager defaultManager] setPlaform:UMSocialPlatformType_Sina appKey:@"3921700954" appSecret:@"04b48b094faeb16683c32669824ebdad" redirectURL:@"https://sns.whalecloud.com/sina2/callback"]; 
  /* 设置Facebook的appKey和UrlString */ 
  [[UMSocialManager defaultManager] setPlaform:UMSocialPlatformType_Facebook appKey:@"506027402887373" appSecret:nil redirectURL:nil]; 
}

（4）设置回调【直接复制即可】

[objc] view plain copy
- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation 
{ 
  //6.3的新的API调用，是为了兼容国外平台(例如:新版facebookSDK,VK等)的调用[如果用6.2的api调用会没有回调],对国内平台没有影响 
  BOOL result = [[UMSocialManager defaultManager] handleOpenURL:url sourceApplication:sourceApplication annotation:annotation]; 
  if (!result) { 
     // 其他如支付等SDK的回调 
  } 
  return result; 
}

7. 将 ios 目录下【sharemodule.h】、【sharemodule.m】文件拖入你的项目即可

【 分享 】

import UShare from './share/share'; 
import SharePlatform from './share/SharePlatform';
/** 
  * 参数说明： 
  * 1. 标题 
  * 2. 内容 
  * 3. 跳转链接 
  * 4. 图片链接 
  * 5. 分享平台 
  * 6. 分享结果回调 
  */ 
 UShare.share('标题','内容','http://baidu.com','http://dev.umeng.com/images/tab2_1.png', SharePlatform.QQ, 
   (code, message) => { 
     // 分享成功：code=200 
     // ToastAndroid.show(message,ToastAndroid.SHORT); 
      
 });

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

React Native第三方平台分享的实例（Android，IOS双平台）

- Author -

Songlcy

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Mootools 1.2教程 Tooltips
Sep 15 Javascript
一些常用的JavaScript函数(json)附详细说明
May 25 Javascript
Javascript的严格模式strict mode详细介绍
Jun 06 Javascript
javascript电商网站抢购倒计时效果实现
Nov 19 Javascript
谈谈jQuery Ajax用法详解
Nov 27 Javascript
JS中静态页面实现微信分享功能
Feb 06 Javascript
使用jQuery操作DOM的方法小结
Feb 27 Javascript
JS中的作用域链
Mar 01 Javascript
详解JS数据类型的值拷贝函数（深拷贝）
Jul 13 Javascript
JavaScript中的E-mail 地址格式验证
Mar 28 Javascript
express+vue+mongodb+session 实现注册登录功能
Dec 06 Javascript
vue2.x 对象劫持的原理实现
Apr 19 Javascript
node中Express 动态设置端口的方法
Aug 04 #Javascript
微信小程序 同步请求授权的详解
Aug 04 #Javascript
微信小程序 转发功能的实现
Aug 04 #Javascript
Vue计算属性的使用
Aug 04 #Javascript
JS+Ajax实现百度智能搜索框
Aug 04 #Javascript
vue插件vue-resource的使用笔记（小结）
Aug 04 #Javascript
分享Bootstrap简单表格、表单、登录页面
Aug 04 #Javascript
装饰器(1) decorator(1) 安卓(1) 分块(1) translation(2) 循环(3) 查找算法(1) 网页解析(1) 二维数组(2) 嵌套(1)
You might like
深入理解PHP之require/include顺序 推荐
2011/01/02 PHP
php class中self,parent,this的区别以及实例介绍
2013/04/24 PHP
PHP中ini_set和ini_get函数的用法小结
2014/02/18 PHP
destoon会员注册提示“数据校验失败（2）”解决方法
2014/06/21 PHP
PHP使用ffmpeg给视频增加字幕显示的方法
2015/03/12 PHP
CodeIgniter多语言实现方法详解
2016/01/20 PHP
Yii基于CActiveForm的Ajax数据验证用法示例
2016/07/14 PHP
JavaScript 学习笔记（十三）Dom创建表格
2010/01/21 Javascript
jquery实现点击向下展开菜单项(伸缩导航)效果
2015/08/22 Javascript
JavaScript常用判断写法大全(推荐)
2016/05/30 Javascript
Javascript函数中的arguments.callee用法实例分析
2016/09/16 Javascript
利用Js的console对象,在控制台打印调式信息测试Js的实现
2016/11/26 Javascript
Angularjs处理页面闪烁的解决方法
2017/03/09 Javascript
JavaScript中document.referrer的用法详解
2017/07/04 Javascript
详解微信小程序Radio选中样式切换
2017/07/06 Javascript
使用electron制作满屏心特效的示例代码
2018/11/27 Javascript
Jquery的Ajax技术使用方法
2019/01/21 jQuery
js实现淘宝首页的banner栏效果
2019/11/26 Javascript
VueX模块的具体使用(小白教程)
2020/06/05 Javascript
vue-router为激活的路由设置样式操作
2020/07/18 Javascript
js实现点击烟花特效
2020/10/14 Javascript
[01:08:57]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第二场
2014/05/24 DOTA
使用OpenCV获取图像某点的颜色值,并设置某点的颜色
2020/06/02 Python
opencv 图像礼帽和图像黑帽的实现
2020/07/07 Python
Python使用pycharm导入pymysql教程
2020/09/16 Python
一款纯css3实现的tab选项卡的实列教程
2014/12/11 HTML / CSS
优秀技术工人先进材料
2014/02/17 职场文书
调研座谈会发言材料
2014/08/23 职场文书
社区国庆节活动总结
2015/03/23 职场文书
2015年技术工作总结范文
2015/04/20 职场文书
2015年家长学校工作总结
2015/04/22 职场文书
英语专业毕业论文答辩开场白
2015/05/27 职场文书
2015年七夕情人节感言
2015/08/03 职场文书
高一军训感想
2015/08/07 职场文书
班主任远程培训研修日志
2015/11/13 职场文书
初二数学教学反思
2016/02/17 职场文书