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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

已注册用户请登录

这是一个创建于 2949 天前的主题，其中的信息可能已经有所发展或是发生改变。

产品一直催我在 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 Schemes 格式说明

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 // 视频跳转页面 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 使用建议参考文档