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

程序员文章站 2022-05-14 19:33:28

本文主要介绍了react native第三方平台分享的实例（android，ios双平台），分享给大家，具体如下：源码已开源到github，地址请点击：【一行代码，双平...

本文主要介绍了react native第三方平台分享的实例（android，ios双平台），分享给大家，具体如下：

源码已开源到github，地址请点击：【一行代码，双平台分享】

目前支持分享的平台有【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); 
      
 });

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

上一篇：让nodeJS支持ES6的词法----babel的安装和使用方法

下一篇：使用jQuery实现鼠标点击左右按钮滑动切换