React Native 轻松集成分享功能（ iOS 篇）

产品一直催我在 RN 项目中添加分享功能，一直没找到合适的库，今天让我看到了一个插件分享给大家。在集成插件之前，需要在各大开放平台上成功注册应用，并通过审核（支持 3 个可选的主流平台）。支持的平台如下：

第一步安装:

在你的项目路径下执行命令：

npm install jshare-react-native --save
npm install jcore-react-native --save
react-native link

第二步：配置

配置 info.plist

在 info.plist 文件中添加如下键值对

<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 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>
</array>

添加 URL Types

URL Types 设置

要是实现跳转还需要在 Xcode 工程目录中的 [TARGETS] -> [Info] 中设置：

HTTPS 设置

Apple 将从 2017 年开始执行 ATS(App Transport Security)，所有进行审核的应用中网络请求全部支持 HTTPS，届时以下配置将会失效，请提前做好准备。

目前 JSHARE 支持不存在新浪微博客户端情况下的网页分享，但是由于新浪微博的 api 尚未针对 https 做优化所以需要针对新浪的做对应的 https 设置。在 JSHARE 中是默认关闭新浪微博的网页端分享的，如需使用这个功能则需要在 JSHARELaunchConfig 类的实例中将 isSupportWebSina 属性设置为 YES。

以 iOS10 SDK 编译的工程会默认以 SSL 安全协议进行网络传输，即 HTTPS，如果依然使用 HTTP 协议请求网络会报系统异常并中断请求。目前可用如下这种方式保持用 HTTP 进行网络连接：

在 info.plist 中加入安全域名白名单（右键 info.plist 用 source code 打开）

<key>NSAppTransportSecurity</key>
<dict>
    <!-- 配置允许 http 的任意网络 End-->
   <key>NSExceptionDomains</key>
   <dict>
       <!-- 集成新浪微博对应的 HTTP 白名单-->
       <key>sina.com.cn</key>
       <dict>
           <key>NSIncludesSubdomains</key>
           <true/>
           <key>NSThirdPartyExceptionAllowsInsecureHTTPLoads</key>
           <true/>
           <key>NSThirdPartyExceptionRequiresForwardSecrecy</key>
           <false/>
       </dict>
       <key>sinaimg.cn</key>
       <dict>
           <key>NSIncludesSubdomains</key>
           <true/>
           <key>NSThirdPartyExceptionAllowsInsecureHTTPLoads</key>
           <true/>
           <key>NSThirdPartyExceptionRequiresForwardSecrecy</key>
           <false/>
       </dict>
       <key>sinajs.cn</key>
       <dict>
           <key>NSIncludesSubdomains</key>
           <true/>
           <key>NSThirdPartyExceptionAllowsInsecureHTTPLoads</key>
           <true/>
           <key>NSThirdPartyExceptionRequiresForwardSecrecy</key>
           <false/>
       </dict>
       <key>sina.cn</key>
       <dict>
           <!-- 适配 iOS10 -->
           <key>NSExceptionMinimumTLSVersion</key>
           <string>TLSv1.0</string>
           <key>NSIncludesSubdomains</key>
           <true/>
           <key>NSThirdPartyExceptionRequiresForwardSecrecy</key>
           <false/>
       </dict>
       <key>weibo.cn</key>
       <dict>
           <!-- 适配 iOS10 -->
           <key>NSExceptionMinimumTLSVersion</key>
           <string>TLSv1.0</string>
           <key>NSIncludesSubdomains</key>
           <true/>
           <key>NSThirdPartyExceptionRequiresForwardSecrecy</key>
           <false/>
       </dict>
       <key>weibo.com</key>
       <dict>
           <!-- 适配 iOS10 -->
           <key>NSExceptionMinimumTLSVersion</key>
           <string>TLSv1.0</string>
           <key>NSIncludesSubdomains</key>
           <true/>
           <key>NSThirdPartyExceptionAllowsInsecureHTTPLoads</key>
           <true/>
           <key>NSThirdPartyExceptionRequiresForwardSecrecy</key>
           <false/>
       </dict>
       <!-- 新浪微博-->  
   </dict>
</dict>

第三步：Usage 使用

import JShareModule from 'jshare-react-native';
JShareModule.setup(param)  // iOS 需要调用初始化函数,parm 这个参数
，需要填入应用注册信息，详情可以参考 API 文档

成功初始化后，就可以调用分享接口，我们先要构造消息对象，然后再调用 share()

//
 // platformString：'wechat_session' / 微信好友(会话)
//                               'wechat_timeLine' /  微信朋友圈
//                               'wechat_favourite' / 微信收藏
//                               'qq' / QQ 好友
//                               'qzone' /   QQ 空间
//                               'sina_weibo' /  新浪微博
//                               'sina_weibo_contact'/ 新浪微博联系人
 //
 //
 // textMessage =
 // {
 //  type: 'text'
 //  platform: platformString  // 分享到指定平台
 //  text: String
 //  imagePath: // 选填，新浪微博本地图片地址，其他平台没有这个字段(iOS 不支持这个字段)
 // }
 // 
 // imageMessage =
 // {
 //  type: 'image'
 //  platform: platformString  // 分享到指定平台
 //  imagePath: String   // 本地图片路径 imagePath,imageUrl imageArray 必须三选一
 //  text: String  // 选填
 //  imageUrl: String // 网络图片地址，必须以 http 或 https 开头，imagePath,imageUrl imageArray 必须三选一 (iOS 不支持这个字段)
 //  imageArray: [String]  // (选填: 分享到 Qzone 才提供这个字段) 如果需要分享多张图片需要这个参数，数组中问题图片路径 imagePath,imageUrl imageArray 必须三选一
 // }
 // 
 // videoMessage =
 // {
 //   type: 'video'
 //   platform: platformString  // 分享到指定平台
 //   title: String // 选填
 //   url: String // 视频@R_639_404@面 url
 //   text: String  // 选填
 //   imagePath: String // 选填，缩略图，本地图片路径
 //  
 //  videoUrl: String  // QQ 空间本地视频 (iOS 不支持这个字段)
 // }
 // 
 // audioMessage =
 // {
 //   type: 'audio'
 //   platform: platformString  // 分享到指定平台
 //   musicUrl: String //必填 点击直接播放的 url
 //   url: String //选填，点击跳转的 url
 //   imagePath: String   //选填，缩略图，本地图片路径，imagePath，imageUrl 必须二选一
 //   imageUrl: String // 选填，网络图片路径，imagePath，imageUrl 必须二选一
 //  title: String // 选填 
 //  text: String  // 选填
 // }
 // 
 // fileMessage =
 // {
 //   type: 'file'
 //   platform: platformString  // 分享到指定平台
 //   path: String // 必填，文件路径
 //   fileExt: String // 必填，文件类型后缀
 //   tile: String
 // }
 // 
 // emoticonMessage =
 // {
 //  type: 'emoticon'
 //  platform: platformString  // 分享到指定平台
 //  imagePath: String // 必填，本地图片路径
 // }
 // 
 // appMessage =
 // {
 //   type: 'app' // wechat_favourite 不支持
 //   platform: platformString  // 分享到指定平台
 //   url: String // 点击跳转 url
 //   extInfo: String // 选填 第三方应用自定义数据
 //   path: String // 选填 对应 app 数据文件
 //   title: String // 选填
 //   text: String // 选填
 // }
 // 
 // {
 //   type: 'link'
 //   platform: platformString  // 分享到指定平台
 //   url: String // 必填，网页 url
 //   imagePath: String // 选填，本地图片路径 imagePath，imageUrl 必须二选一 
 //   imageUrl: String // 选填，网络图片地址 imagePath imageUrl 必须二选一 (iOS 不支持)
 //   title: String // 选填
 //   text: String // 选填
 // }


 // 消息分享可以分享如上的类型，不同消息需要构建不同的消息对象
 // 当前支持 文字、图片、音频、视频、文件、链接、app、表情
  JShareModule.share(message,successCallback,failCallback)

示例代码（分享文本到微信好友）

var shareParam = {
  platform: "wechat_session",type: "text",text: "JShare test text"
};
shareParam.imagePath = this.state.path  // this.state.path 是本地图片的路径
JShareModule.share(shareParam,(result) => {
  console.log("share succeed,result: " + result);
},(error) => {
  console.log("share Failed,map: " + error);
});

到此我们已经成功集成了分享功能，其他的 API 使用建议参考文档

原文链接：https://www.f2er.com/react/302737.html

React Native 轻松集成分享功能（ iOS 篇）

猜你在找的React相关文章