独立开发 | wdkang 的博客

type

status

date

slug

summary

独立开发记录：我的 Authenticator App 开发之旅

一次从零到一的独立开发实践，基于 React Native 打造的两步验证工具。

作为一名前端开发工程师，我一直对安全和用户体验比较感兴趣。市面上的两步验证工具不少，但大多数界面老旧、交互繁琐，于是萌生了自己动手做一个更轻量、美观的 Authenticator App 的想法。

在决定用什么框架来开发这个 app 时，我做了一番调研和对比：

最终选择了 React Native，因为我熟悉 React 技术栈，而且社区资源丰富。为了提高开发效率，我还使用了 Expo 来初始化项目：

UI 是个关键，我希望 app 的体验足够精致。考虑过以下组件库：

不过为了更灵活地定制 UI，我最终选择了 手搓样式 + Tailwind CSS 风格的写法，并且使用了 nativewind 来让 Tailwind 语法在 React Native 中复活。

代码示例：

为了让用户能快速添加账号，我引入了摄像头扫码功能。

使用的是 react-native-vision-camera：

配合 VisionCamera 的插件，可以实现流畅的扫码体验。

我还需要支持二维码的生成与解析，于是选择了 rn-qr-generator：

扫码识别与生成一应俱全，功能体验相当不错。

一开始我用了 @react-native-async-storage/async-storage 作为本地存储方案，确实很方便：

但后来数据多了之后，性能变得不稳定，于是改用了性能更强的 react-native-mmkv。不仅读写速度飞快，还支持加密：

体验提升非常明显。

作为一个希望商业化的 side project，我也接入了内购功能。选择的是大名鼎鼎的 RevenueCat，集成简单，支持 iOS 和 Android。

之后就能用 RevenueCat 提供的 SDK 获取商品、处理订阅、查看用户状态，非常省心。

开发这款 Authenticator App 是一次非常有收获的过程。以下是我的技术选型清单：