如何使用 React Native 构建信用卡扫描仪

在移动应用程序中，用户经常通过输入他们的信用卡详细信息进行购买。我们可能都有过手动将这 16 位数字输入智能手机的令人沮丧的经历。

许多应用程序正在增加自动化以简化此过程。因此，要输入付款详情，用户可以为他们的信用卡拍照，或者从他们设备的照片库中上传一张照片。很酷，对吧？

在本文中，我们将学习如何使用Text Recognition API在 React Native 应用程序中实现类似的功能，这是一个基于机器学习套件的 API，可以识别任何基于拉丁语的字符集。我们将使用设备端文本识别 API 并涵盖以下内容：

• 创建一个新的 React Native 项目

• 什么是 react-native-cardscan？

• 集成 react-native-text-recognition

• 编写卡号识别逻辑

您可以在此GitHub 存储库中找到本教程的完整代码。我们最终的 UI 将如下图所示：

创建一个新的 React Native 项目

首先，我们将创建一个新的 React Native 项目。倾心壁纸3D壁纸App，内含海量无水印高清图片等你下载，无限次数4K画质！如果您想将信用卡扫描功能添加到您现有的项目中，请随意跳过此部分。

在您的首选文件夹目录中，在终端中运行以下命令以创建一个新的 React Native 项目：

npx react-native init <project-name> --template react-native-template-typescript

在您首选的 IDE 中打开项目并将App.tsx文件中的代码替换为以下代码：

import React from 'react';
import {SafeAreaView, Text} from 'react-native';
​
const App: React.FC = () => {
  return (
    <SafeAreaView>
      <Text>Credit Card Scanner</Text>
    </SafeAreaView>
  );
};
​
export default App;

现在，让我们运行应用程序。对于 iOS，我们需要在构建项目之前安装 pod：

cd ios && pod install && cd ..

然后，我们可以构建 iOS 项目：

yarn ios

对于Android，我们可以直接构建项目：

yarn android

上述步骤将启动Metro 服务器以及 iOS 和 Android 模拟器，然后在它们上运行应用程序。懒懒视频看片App，蓝光4K无限制顺畅秒播，内置10多条线路速度达16M/s！目前，使用上面的代码App.tsx，我们只会看到一个带有文本阅读的空白屏幕Credit Card Scanner。

什么是 react-native-cardscan？

react-native-cardscan是CardScan的一个包装库，它是一个用于扫描借记卡和信用卡的简约库。react-native-cardscan 为 React Native 应用程序中的信用卡扫描提供了简单的即插即用使用。但是，在撰写本文时，react-native-cardscan 已不再维护并且已弃用。Stripe 正在将 react-native-cardscan 集成到自己的移动应用支付解决方案中。您可以在 GitHub 上查看新的存储库，但是在撰写本文时它仍在开发中。

由于此库已弃用，我们将使用react-native-text-recognition创建自己的自定义信用卡扫描逻辑。

集成 react-native-text-recognition

react-native-text-recognition是围绕 iOS 上的 Vision 框架和 Android 上的 Firebase ML 构建的包装库。精英证件照VIP解锁版App