首页
所有分类
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 相关文章推荐
JQUERY的属性选择符和自定义选择符使用方法（二）
Apr 07 Javascript
Javacript实现颜色梯度变化和渐变的效果代码
May 31 Javascript
JavaScript实现按照指定长度为数字前面补零输出的方法
Mar 19 Javascript
JavaScript使用pop方法移除数组最后一个元素用法实例
Apr 06 Javascript
Web前端新人笔记之jquery入门心得(新手必看)
May 17 Javascript
js获取新浪天气接口的实现代码
Jun 06 Javascript
JavaScript中关于class的调用方法
Nov 28 Javascript
node.js博客项目开发手记
Mar 16 Javascript
前后端如何实现登录token拦截校验详解
Sep 03 Javascript
js计算两个日期间的天数月的实例代码
Sep 20 Javascript
Vue实现简单分页器
Dec 29 Javascript
vue实现表格过滤功能
Sep 27 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
239军机(1) DE1105(1) SONY600GR(1) YAESU(1) DE1103(2) ICF-903L(1) AN-LP1(1) DE1107(3) 根德5570(1) frg-100(1)
You might like
PHP循环获取GET和POST值的代码
2008/04/09 PHP
js判断FCKeditor内容是否为空的两种形式
2013/05/14 Javascript
JavaScript数组函数unshift、shift、pop、push使用实例
2014/08/27 Javascript
jQuery实现异步获取json数据的2种方式
2014/08/29 Javascript
分享一个常用的javascript静态类
2014/12/31 Javascript
jquery中EasyUI使用技巧小结
2015/02/10 Javascript
JS绘制生成花瓣效果的方法
2015/08/05 Javascript
webpack+vue中使用别名路径引用静态图片地址
2017/11/20 Javascript
解析Json字符串的三种方法日常常用
2018/05/02 Javascript
vue 注册组件的使用详解
2018/05/05 Javascript
基于JS实现带动画效果的流程进度条
2018/06/01 Javascript
JS使用tween.js动画库实现轮播图并且有切换功能
2018/07/17 Javascript
JS基于Location实现访问Url、重定向及刷新页面的方法分析
2018/12/03 Javascript
微信小程序 冒泡事件原理解析
2019/09/27 Javascript
[02:20]DOTA2亚洲邀请赛 IG战队出场宣传片
2015/02/07 DOTA
python单元测试unittest实例详解
2015/05/11 Python
Python备份目录及目录下的全部内容的实现方法
2016/06/12 Python
Python中.py文件打包成exe可执行文件详解
2017/03/22 Python
微信跳一跳python辅助脚本（总结）
2018/01/11 Python
Python从数据库读取大量数据批量写入文件的方法
2018/12/10 Python
正确理解Python中if __name__ == '__main__'
2019/01/24 Python
Python中如何将一个类方法变为多个方法
2019/12/30 Python
Python 将json序列化后的字符串转换成字典(推荐)
2020/01/06 Python
Python学习之路之pycharm的第一个项目搭建过程
2020/06/18 Python
Css3+Js制作漂亮时钟(附源码)
2013/04/24 HTML / CSS
html5指南-5.使用web storage存储键值对的数据
2013/01/07 HTML / CSS
美国高端牛仔品牌：Silver Jeans
2019/12/12 全球购物
荷兰时尚精品店：Labels Fashion
2020/03/22 全球购物
MIKI HOUSE美国官方网上商店：日本领先的婴儿和儿童高级时装品牌
2020/06/21 全球购物
教师师德演讲稿
2014/05/06 职场文书
学习党的群众路线剖析材料
2014/10/09 职场文书
银行先进个人总结
2015/02/15 职场文书
银行客户经理岗位职责
2015/04/09 职场文书
孝女彩金观后感
2015/06/10 职场文书
九年级英语教学反思
2016/02/15 职场文书
Python如何快速找到多个字典中的公共键(key)
2022/04/29 Python