React-Native的 第三方登录-苹果登录

现在如果使用了第三方登录,那么iOS这边 就必须要添加苹果登录,否则......你无法上架
算是新规吧,各大公司也都添加了 苹果登录了.
RN 怎么做呢?下面带你 玩转RN的苹果登录

首先你要去你的开发者网站把这个东西打开
开发者网站->Certificates->Identifiers


React-Native的 第三方登录-苹果登录_第1张图片
image.png

项目里把他选出来


React-Native的 第三方登录-苹果登录_第2张图片
image.png

可以去我的GitHub[https://github.com/JonsonHI/SignWithApple]把iOS的文件拖入到项目中

React-Native的 第三方登录-苹果登录_第3张图片
image.png

至于不会iOS的同学 你也不用纠结,你也看不懂.
至于会iOS的同学 相信你也可以写的出来.
我会介绍下RN->iOS的通讯
coustomView 这个类 其实就是 自定义一个iOS原生View 导入到RN的页面中
我写的是 imageView 你也可以改成UIView 这个随你自己
主要业务就是点击这个View 然后监听到苹果登录的回调方法.
其他的就都是原生苹果API 做的事情了


React-Native的 第三方登录-苹果登录_第4张图片
image.png

这里还有个onClick 点击事件
这个方法是和RN 通讯的 success 和 error 都回调给 RN 让RN 来做相应的处理

如果上面的文件你都导入到了 iOS项目中,那么下面你需要些 RN 代码了

//先导入我们封装的方法
var NativeView = requireNativeComponent('SignWithApple');

SignWithApple 是在你下面这个类的名字


React-Native的 第三方登录-苹果登录_第5张图片
image.png

就是这个类了 有了对应的名字你才能调用

js 代码如下

{
               if(info.nativeEvent.success){
                 alert(info.nativeEvent.success)
               }else if(info.nativeEvent.error){
                  alert(info.nativeEvent.error)
              }                   
        }}
  >
//这里是一张SVG图片 你可以自己自定义
        
   

截屏动画我就不上了,因为涉及到个人账号隐私

这个代码拿过来就可以用,如果你觉得写的不好,你也可以 自己修改.
就到这吧

你可能感兴趣的:(React-Native的 第三方登录-苹果登录)