ios开发中React Native 集成分享与第三方登录功能模块开发教程

ios开发中react native 集成分享与第三方登录功能模块开发教程。在我们常用的app中经常会看到分享与第三方登录的功能，可以说分享与第三方登录已经成为了各大app的必备功能。对于产品运行与来说，分享与第三方登录不仅能加强用户粘性，增加流量及新用户，也能提升用户存、留优化产品质量等。

各大平台都有对应的开发平台来提供分享与第三方登录的服务，比如微信开发平台/腾讯开发平台、新浪开发者平台等。因为各大平台及相关sdk存在很大的差异，单独集成起来比较繁琐，为了快速集成分享与第三方登录我们可以使用相应统一的服务提供商，常用的分享与登录的提供商有umeng与sharesdk。

截止目前，但各大平台与集成服务的提供方都只提供了native版本的sdk，没有对react native做支持，为此要在react native应用中添加分享与第三方登录我们需要开发出能供react native应用使用的分享与登录模块。

在这篇文章中我会向大家分享，在react native中集分享第与三方登录功能的流程以及分享与第三方登录模块开发。(在本文中我将以umeng为例来进行讲解)

第一步：集成准备

首先我们需要到官网申请一个开发者账号。然后创建一个应用并获取appkey。
在之后呢，我们需要进行必不可少的一步就是，到各大平台申请第三方开发者账号，关于申请的流程官网文档讲解的已经很详细了，在这里我不再重复了。

各大平台申请服务所需要等待的时间不等，通常是1-3天就可以搞定，建议在申请的同时，就进行sdk的集成，等申请通过之后，在换成正式的账号进行调试，这样一来开发申请两不误。

第二步：集成sdk

umeng分享与登录sdk支持通过cocoapods的集成方式，通过这种方式我们集成起来方便很多。

在你的项目根目录创建一个 podfile 文件，添加如下内容：

# 集成新浪微博
pod 'umengushare/social/sina'
# 集成微信
pod 'umengushare/social/wechat'
# 集成qq
pod 'umengushare/social/qq'
# 集成邮件
pod 'umengushare/social/email'
# 集成短信
pod 'umengushare/social/sms'

如：

platform :ios, '7.0'

target 'imooc_gp' do
    pod 'umenganalytics'
    pod 'umengushare/ui'
    # 集成新浪微博
    pod 'umengushare/social/sina'
    # 集成微信
    pod 'umengushare/social/wechat'
    # 集成qq
    pod 'umengushare/social/qq'
    # 集成邮件
    pod 'umengushare/social/email'
    # 集成短信
    pod 'umengushare/social/sms'
end

以上是我所选择集成的一些平台，如需选择其他平台可以参考：快速集成
然后在terminal下运行命令如下：

pod install

若发现找不到相应的sdk，则需要执行pod update命令来更新u-share sdk。

命令执行完成后即可完成统计sdk的下载安装。

然后，我们打开项目项目根目录下的ios文件夹，会看到一个xxx.xcworkspace的文件：
![打开xcworkspace](/users/penn/百度云同步盘/sync/work/study&developing/待发博文/react native 集成统计的功能/images/打开xcworkspace.png)

用xcode打开该文件就会看到我们刚才集成的sdk了：
![sdk集成](/users/penn/百度云同步盘/sync/work/study&developing/待发博文/react native 集成统计的功能/images/sdk集成.png)

如果我们一个项目中有多个project，那么则需要用xcworkspace是来管理我们的项目，我们通过pod安装了统计sdk后，项目中会多出来一个名为pods的project，所以后我们需要通过xcworkspace来打开我们的ios项目了。

第三步：构建分享及登录模块

为了能够在react native中使用umeng分享及登录，我们需要为刚才导出的sdk创建一个native 模块然后通过桥接的方式供js部分进行调用，关于如何开发react native原生模块，可参考《react native ios原生模块开发实战|教程|心得
》。

创建ushare

在u_share模块中我们创建了一个ushare类，该类主要负责umeng分享sdk之间的通信。

lsapplicationqueriesschemes

    
    wechat
    weixin

    
    sinaweibohd
    sinaweibo
    sinaweibosso
    weibosdk
    weibosdk2.5

    
    mqqapi
    mqq
    mqqopensdkssologin
    mqqconnect
    mqqopensdkdataline
    mqqopensdkgrouptribeshare
    mqqopensdkfriend
    mqqopensdkapi
    mqqopensdkapiv2
    mqqopensdkapiv3
    mqqopensdkapiv4
    mqzoneopensdk
    wtloginmqq
    wtloginmqq2
    mqqwpa
    mqzone
    mqzonev2
    mqzoneshare
    wtloginqzone
    mqzonewx
    mqzoneopensdkapiv2
    mqzoneopensdkapi19
    mqzoneopensdkapi
    mqqbrowser
    mttbrowser

上述代码根据所选择的平台不同而略有差异，具体可参照快速集成：

通过这里查看实现分享与第三方登录的视频教程

接下来我们需要进行url scheme的设置：

url scheme

url scheme是通过找到并跳转对应app的一类设置，通过向项目中的info.plist文件中加入url types可使用第三方平台所注册的appkey信息向系统注册你的app，当跳转到第三方应用授权或分享后，可直接跳转回你的app，关于url scheme的设置可参考url scheme

初始化设置

应用启动后进行u-share和第三方平台的初始化工作，我们需要在appdelegate.m进行u-share的初始化：

import { nativemodules } from 'react-native';
module.exports = nativemodules.ushare;

这样以来呢，我们就可以在js模块中来使用分享以及第三方登录了：

import ushare from '../common/ushare'//导入ushare.js
//...省略部分代码
ushare.share(shareapp.title, shareapp.content,
    shareapp.imgurl,shareapp.url,()=>{},()=>{})

现在呢，我们已经在react native的ios中集成了分享与第三方登录的功能。