在 App 开发中我们经常需要在用户登录模块接入 SNS 登录组件这样会大大提高用户的注册体验。特别当一个不是刚性需求 App 推广的时候这样会很大的降低用户体验的成本没有人愿意忍受输入邮箱、手机号码去注册一个账号的流程。本文主要分享了在 React Native 中接入微博、微信、QQ 登录的流程以及此前登录组件中修复的一个已知 bug 的修复。我的源博客地址React Native 接入微博、微信、QQ 登录功能 | 好记性不如烂键盘使用的登录组件这里使用的组件是 react-native-open-share此组件从 iOS 的 SNS 通用登录组件 OpenShare fork 出来的添加了到 React Native 的组件映射。源作者是 Jiayao Wu后来我在使用的过程中发现了新浪微博登录的一个 bug下面会说明此 bug 的原因。我 fork 出来后修复了此 bug修复后的项目在 react-native-open-share等待源作者 merge 进 master 中去目前需要使用的可以去我的项目地址中下载使用。项目接入项目前期具体接入的过程在项目页面已经做了详细的说明如果在接入过程中遇到什么问题欢迎留言讨论。这里主要针对接入过程中可能需要注意的几个点作一些说明。关于新浪微博、微信、QQ 接入审核的注意点三个平台都需要进行项目提交审核一般都是一到两个工作日审核结束。新浪微博、QQ 获取登录权限是免费的微信的登录权限以及一些其他的高级功能需要每年缴纳300元人民币的费用。平台对应的地址分别为新浪微博微信QQ关于项目中 key 以及认证 URL 的设置项目中两个地方需要设置key分别为Info.plist和AppDelegate.m中。需要注意的是在Info.plist中key 的前面是有前缀的按照示例程序中的添加修改即可一定要注意。新浪微博需要特别注意授权回调页的 URL 需要和登录组件中的 URL 完全一致因为 App 不涉及到回调后的页面所以只要保证两个 URL 一致并能访问即可。组件中的 URL 地址定义在文件SocietyLoginManager.m中的约 105 行处。其他没有特别需要注意的地方按照项目接入说明接入即可。React Native 中的使用在 React Native 通过添加三个 SNS 的图标添加上对应的方法调用即可代码如下var openShare require(react-native-open-share); //头部导入组件 _weiboLogin: function() { var _this this; openShare.weiboLogin(); if (!_this.weiboLogin) { _this.weiboLogin DeviceEventEmitter.addListener( managerCallback, (response) { AlertIOS.alert( response, JSON.stringify(response) ); _this.weiboLogin.remove(); delete _this.weiboLogin; } ); } }, _qqLogin: function() { var _this this; openShare.qqLogin(); if (!_this.qqLogin) { _this.qqLogin DeviceEventEmitter.addListener( managerCallback, (response) { AlertIOS.alert( response, JSON.stringify(response) ); _this.qqLogin.remove(); delete _this.qqLogin; } ); } }, _wechatLogin: function() { var _this this; openShare.wechatLogin(); if (!_this.wechatLogin) { _this.wechatLogin DeviceEventEmitter.addListener( managerCallback, (response) { AlertIOS.alert( response, JSON.stringify(response) ); _this.wechatLogin.remove(); delete _this.wechatLogin; } ); } }接入后就可以在 alert 中看到返回的 json 数据了。之前组件中存在的一个 bug 处理之前的组件在微博返回数据的时候直接使用 NSDictionary 进行返回了但是微博的 SDK 中返回日期类型的时候会导致 React Native 解析 json 的时候报错错误如下*** Terminating app due to uncaught exception NSInvalidArgumentException, reason: Invalid type in JSON write (__NSDate) *** First throw call stack: ...主要的出错代码在文件SocietyLoginManager.m中的约 112 行处。所以对返回的数据增加对应的日期格式化函数并调用即可。主要的处理函数相关的调用去查看源代码即可。//处理 返回数据中的 expirationDate 值因为值的格式有问题转换成 string 后才能符合 json 的格式要求。 ********开始******** //Commit by Parry at 2016-01-26 - (NSMutableDictionary*)change: (NSDictionary *)message { NSMutableDictionary* data [message mutableCopy]; if ([message objectForKey:expirationDate]) { NSDateFormatter *dateToStringFormatter [[NSDateFormatter alloc] init]; [dateToStringFormatter setDateFormat:yyyy-MM-dd HH:mm:ss]; NSDate *date [data objectForKey:expirationDate]; NSString *strDate [dateToStringFormatter stringFromDate:date]; data [message mutableCopy]; [data setObject:strDate forKey:expirationDate]; } return data; } //处理 返回数据中的expirationDate值因为值的格式有问题转换成 string 后才能符合 json 的格式要求。 ********结束********这样这个 React Native 下的 SNS 登录通用组件就可以完美地使用了。使用中有任何问题欢迎留言交流、讨论。