前段时间自己试着用react-native写一个小应用，对于我这个半路出家的前端，而且对Android也是一窍不通，踩过的坑不知道有多少。好在网上有很多前辈总结的经验，才让我勉勉强强坚持下来。好了，切入主题，说多了都是泪。
友盟（umeng）分享组件在app开发中应该是用的比较多的一套组件了，我也是通过在网上各种研究后才决定用他作为第三方登录和分享，在react-native中想要集成友盟也是一件比较麻烦的事情，特别是对于没有接触过原生开发的同学。在这里要感谢 react native集成友盟登录分享记录1.0.0 这篇文章，不会的也可以看着友盟的官方文档一步一步配置，只是官方文档比较杂散，但是能保证版本的同步。有时间我再把自己集成的过程贴出来。
这次要说的是友盟的第三方登录这一块，比如说使用QQ登录，默认情况下，当第一次授权的时候，会跳转到授权界面，用户可以选择想要授权账号等，授权成功后，友盟会自己记录一个授权状态并生成一个refreshToken,在有效期内当我们重新点击QQ登录时，你会发现不会和第一次一样弹出授权选择界面，而是直接使用上次授权的账号直接获取了授权信息。在有些情况下，这是可行的，但是仔细一想，似乎又有点问题。
一般的APP一般都有登录和退出账号，假如我登录后想要用另一个QQ账号登录（假装有小号），如果按照友盟默认的行为，那么我退出登录后再次点击使用QQ登录时，就不会出现授权界面，也就无法更换QQ账号登录，这肯定是不行的。
关键的地方来了，官方并没有给出react-native的配置选项，网上找了一大圈都是原生的，作为小白根本不知道是改哪个地方，而且原生的友盟SDK和 react-native的差别比较大，为了解决这事也是绞尽脑汁，最后终于探索出来，当然会原生的就不要笑话我了。
解决方法：
1、找到如图所示文件shareModule.java（即之前在友盟下载的分享组价包，我使用的是6.9.3版本），文件目录根据自己的包来。
2、在shareModule.java文件中查找 auth，会有一个auth的函数，如下
@ReactMethod //注意观察这里，这里声明是一个react方法
public void auth(final int sharemedia, final Callback successCallback){
runOnMainThread(new Runnable() {
@Override
public void run() {
UMShareAPI.get(ma).getPlatformInfo(ma, getShareMedia(sharemedia), new UMAuthListener() {
@Override
public void onStart(SHARE_MEDIA share_media) {
}
@Override
public void onComplete(SHARE_MEDIA share_media, int i, Map map) {
WritableMap result = Arguments.createMap();
for (String key:map.keySet()){
result.putString(key,map.get(key));
Log.e("todoremove","key="+key+" value"+map.get(key).toString());
}
successCallback.invoke(0,result,"success");
}
@Override
public void onError(SHARE_MEDIA share_media, int i, Throwable throwable) {
WritableMap result = Arguments.createMap();
successCallback.invoke(1,result,throwable.getMessage());
}
@Override
public void onCancel(SHARE_MEDIA share_media, int i) {
WritableMap result = Arguments.createMap();
successCallback.invoke(2,result,"cancel");
}
});
}
});
}
这个函数的作用不知道大家看明白的没有，是不是感觉在哪见过？没错，这就是我们的授权函数，在react-native中我们会用到它，比如我要发起登录授权的时候：
import ShareUtile from '../../utils/ShareUtil'
// 当我点击登录按钮时,logintype为选择的登录方式，比如QQ登录为 1
async userLogin(logintype) {
// 登录
// 此处调用的就是上面提到的 auth 方法
ShareUtile.auth(logintype, async (code, result, message) => {
console.log(code)
console.log(result)
console.log(message)
if (code == 0) {
result.logintype = logintype;
// 下面是你自己的登录逻辑
try {
let res = await Api.users.login(result);
console.log(res)
} catch (err) {
console.log(err)
}
}
});
}
这样一来，我们就会想能不能自己添加一个方法，然后每次点击登录的时候先取消授权，再进行登录呢，答案是肯定的，怎么添加，其实友盟提供了一个删除授权的函数deleteOauth(),参数和授权时的一样，具体代码看下面：
3、在shareModule.java中添加一个取消授权函数deleteOauth()，可以紧跟在auth()函数下面
// umeng取消登录授权
@ReactMethod
public void deleteOauth(final int sharemedia,final Callback successCallback) {
UMShareAPI.get(ma).deleteOauth(ma, getShareMedia(sharemedia), new UMAuthListener() {
@Override
public void onStart(SHARE_MEDIA share_media) {
//开始取消授权
}
@Override
public void onComplete(SHARE_MEDIA share_media, int i, Map map) {
//取消授权成功 i=1
successCallback.invoke(0,"success");
}
@Override
public void onError(SHARE_MEDIA share_media, int i, Throwable throwable) {
//取消授权出错
successCallback.invoke(1,"error");
}
@Override
public void onCancel(SHARE_MEDIA share_media, int i) {
//取消
successCallback.invoke(0,"cancel");
}
});
}
注意：successCallback 为回调，这里我回调函数只保留了两个参数，在react-native中调用的时候回调也只有两个参数，可根据自己习惯设置回调参数。
4、然后回到我们的登录页面进行登录操作：
async userLogin(logintype) {
// 登录
// 先执行我们自己设置的取消授权操作，然后在回调中再进行授权操作
ShareUtile.deleteOauth(logintype,async (code,message) => {
console.log(code)
console.log(message)
// 这里我没有做取消授权是否成功的判断，然后发起之前的授权操作
ShareUtile.auth(logintype, async (code, result, message) => {
console.log(code)
console.log(result)
console.log(message)
if (code == 0) {
result.logintype = logintype;
try {
let res = await Api.users.login(result);
console.log(res)
} catch (err) {
console.log(err)
}
}
});
})
}
好了，大功告成，这样，每次我们需要重新登录的时候就会弹出授权界面，用户可以选择自己想要的账号进行登录，其实找到地方之后不难，关键是对于我们这种原生小白不知道从何下手，希望分享出来能帮助有需要的同学吧。毕竟我找了好久没有找到合适的，祝大家学习愉快。