在`RN`中配置使用`Apple`登录的配置和使用说明

ReactNative 苹果账号第三方登录,下面我们将对于在RN中配置使用Apple登录的配置和使用说明。

原文地址

安装

  • 安装三方模块
npm i @invertase/react-native-apple-authentication 
  • Xcode中添加Sign Apple如下图所示

使用

在业务逻辑中我们自定义登录模块

// apple 账号登录
  const handleAppleLogin = async () => {
    try {
      const appleAuthRequestResponse = await appleAuth.performRequest({
        requestedOperation: appleAuth.Operation.LOGIN,
        requestedScopes: [appleAuth.Scope.EMAIL, appleAuth.Scope.FULL_NAME]
      })

      if (!appleAuthRequestResponse.identityToken) {
        throw 'Apple Sign-In failed - no identify token returned'
      }

      const { identityToken, nonce, email, user, fullName } = appleAuthRequestResponse
      // const credentialState = await appleAuth.getCredentialStateForUser(appleAuthRequestResponse.user)
      // 001224.63aea5c8ff124f63b83741ae928b2c9f.0007
      console.log('appleAuthRequestResponse', appleAuthRequestResponse)

      Alert.alert(nonce, JSON.stringify(identityToken))
    } catch (err) {}
  }

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
React Native ,可以使用第三方库 `react-native-camera` 来实现二维码扫描功能。 首先,在你的 React Native 项目安装 `react-native-camera` 库: ``` npm install react-native-camera --save ``` 接着,将 `react-native-camera` 库添加到项目。在 iOS ,需要使用 CocoaPods,在项目的 `Podfile` 添加以下代码: ``` pod 'react-native-camera', :path => '../node_modules/react-native-camera' ``` 在 Android ,在项目的 `build.gradle` 文件添加以下代码: ``` dependencies { implementation project(":react-native-camera") // ... } ``` 然后,运行 `pod install` 或 `gradlew clean` 命令来安装库。 接下来,创建一个名为 `QRCodeScanner` 的组件,并在其使用 `react-native-camera` 库来实现二维码扫描功能。以下是一个简单的示例: ```jsx import React, { Component } from 'react'; import { StyleSheet, View } from 'react-native'; import { RNCamera } from 'react-native-camera'; class QRCodeScanner extends Component { onBarCodeRead = (e) => { // 处理扫描到的二维码数据 console.log(e.data); }; render() { return ( <View style={styles.container}> <RNCamera style={styles.preview} type={RNCamera.Constants.Type.back} flashMode={RNCamera.Constants.FlashMode.off} onBarCodeRead={this.onBarCodeRead} /> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, flexDirection: 'row', }, preview: { flex: 1, justifyContent: 'flex-end', alignItems: 'center', }, }); export default QRCodeScanner; ``` 在上面的示例,创建了一个名为 `QRCodeScanner` 的组件,其使用了 `RNCamera` 组件来渲染相机预览界面,并通过 `onBarCodeRead` 回调函数处理扫描到的二维码数据。 最后,将 `QRCodeScanner` 组件添加到你的应用程序即可使用二维码扫描功能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

执念1012

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值