logo
0
1
WeChat Login

🚀 React Native Template Obytes + CNB

基于生产级 React Native 模板,集成 CNB 自动化构建,打 Tag 即自动交付 Android APK

React Native Expo SDK TypeScript License: MIT CNB Build PRs Welcome


快速开始 · 技术栈 · 构建流程 · FAQ · 文档


📖 简介

本项目基于 Obytes React Native Template —— 一个生产级的 React Native 开发模板,集成了 cnb.cool CI 流水线,实现 打 Tag 即可自动构建 Android APK 并发布到 Release。

模板内置了认证流程、Feed 列表、设置页、多主题、多语言等示例模块,开箱即用。

📚 详细开发指南请查看 DEVELOPMENT-GUIDE.md


🛠 技术栈

分类技术版本
⚛️ 框架Expo + React NativeSDK 54 / 0.81
📝 语言TypeScript(严格模式)5.9
🧭 路由Expo Router(文件路由)6
🎨 样式TailwindCSS (Uniwind)4.x
🔄 数据React Query + Axios5.x
📋 表单TanStack Form + Zod-
📦 状态Zustand5.x
💾 存储react-native-mmkv-
🌐 国际化i18next25.x
🧪 测试Jest + React Testing Library-

✨ 特性

  • 🏗️ 生产级架构 — 基于 Expo SDK 54,开箱即用的项目结构
  • 🔐 认证流程 — 完整的登录/注册/Token 管理示例
  • 🌓 多主题 — 深色/浅色模式自动切换
  • 🌍 多语言 — i18next 国际化方案
  • 📱 文件路由 — Expo Router 6 文件系统路由
  • 🎯 类型安全 — TypeScript 严格模式 + Zod 校验
  • 🔄 CI/CD — CNB 打 Tag 自动构建 APK
  • 质量保障 — ESLint + Jest + Husky + CommitLint

🚀 快速开始

前置条件

本地开发

# 1. 克隆仓库 git clone https://github.com/obytes/react-native-template-obytes.git cd react-native-template-obytes # 2. 安装依赖 pnpm install # 3. 启动开发服务器 pnpm start

🔧 CNB 自动化构建

本仓库配置了 .cnb.yml,支持在 cnb.cool 平台上通过 打 Tag 自动构建 Android APK 并发布到 Release。

构建流程

git tag v1.0.0 && git push origin v1.0.0 │ ▼ CNB 检测 tag_push 事件 │ ▼ 从 Tag 提取版本号 (v1.0.0 → 1.0.0) │ ▼ 安装依赖 → 注入版本号 → EAS 本地构建 │ ▼ 生成 APK → 创建 Release → 上传附件 │ ▼ ✅ 在 Release 页面下载 app-1.0.0.apk

配置步骤

1️⃣ Fork 本仓库到 cnb.cool

cnb.cool 上 Fork 本仓库,或创建新仓库并推送代码。

2️⃣ 注册 Expo 账号并获取配置
  1. 访问 expo.dev 注册账号(如已有账号则登录)

  2. 创建 Expo 项目:在项目根目录运行以下命令(或在 Expo 网站创建):

    npm install -g eas-cli eas login # 登录你的 Expo 账号 eas init # 初始化项目,会返回 Project ID
  3. 获取 EXPO_TOKEN:访问 expo.dev/settings/access-tokens,创建一个 Personal Access Token,记录下来备用

  4. 记录以下三个值

    来源示例
    Expo 用户名eas whoamihakureireimi
    Project IDeas init 返回 / Expo 项目设置页a9a3f80e-aaff-4d52-...
    Project SlugExpo 项目设置页test-cnb
3️⃣ 修改项目配置

编辑 app.config.ts,将以下三处替换为你自己的值:

// app.config.ts 第 11-12 行 const EXPO_ACCOUNT_OWNER = 'your-expo-username'; // ← 改为你的 Expo 用户名 const EAS_PROJECT_ID = 'your-project-id'; // ← 改为你的 Project ID
// app.config.ts 第 36 行 slug: 'your-project-slug', // ← 改为你的 Project Slug

💡 这三个值是公开信息,直接写在代码中即可,不需要放入秘钥仓库。

4️⃣ 创建 CNB 秘钥仓库(存放 EXPO_TOKEN)

CNB 使用「秘钥仓库」管理敏感信息,这是一种高安全等级的特殊仓库,禁止 clone,只能通过 Web 编辑。

  1. 访问 cnb.cool/new/repos 创建新仓库
  2. 仓库类型选择 「秘钥仓库」(如命名为 your-org/secrets
  3. 在秘钥仓库的 Web 界面中创建文件 env.yml,写入以下内容:
# 访问控制:只允许指定仓库引用此秘钥 allow_slugs: - your-org/your-repo-name # ← 改为你的 CNB 仓库路径 # 只允许 tag_push 事件使用 allow_events: - tag_push # Expo 访问令牌(第 2 步获取的 Token) EXPO_TOKEN: "your-expo-access-token" # ← 改为你的 EXPO_TOKEN
5️⃣ 更新 .cnb.yml 中的秘钥仓库地址

编辑 .cnb.yml,将 imports 中的 URL 替换为你的秘钥仓库文件地址:

imports: - https://cnb.cool/your-org/secrets/-/blob/main/env.yml # ← 改为你的实际地址
6️⃣ 提交并推送代码
git add -A git commit -m "chore: 配置 Expo 项目和 CNB CI" git push origin master
7️⃣ 打 Tag 触发构建
# 打 Tag(Tag 名称即版本号,必须以 v 开头) git tag v1.0.0 git push origin v1.0.0

推送后,cnb.cool 会自动开始构建。在仓库的「构建」页面可查看实时日志。

构建完成后,在仓库的 Releases 页面即可下载 app-1.0.0.apk


⚙️ .cnb.yml 配置说明

点击展开配置详情
v*: # 匹配所有 v 开头的 tag tag_push: # tag 推送事件触发 - name: android-apk-build runner: cpus: 32 # 构建节点 CPU 数 docker: image: reactnativecommunity/react-native-android:latest # 含 Android SDK 的镜像 imports: # 从秘钥仓库导入 EXPO_TOKEN - https://cnb.cool/.../env.yml env: # 环境变量 EXPO_PUBLIC_APP_ENV: preview GRADLE_OPTS: "..." # Gradle 内存限制 NODE_OPTIONS: "..." # Node 内存限制 stages: - name: 环境准备 # 打印 Tag 信息、检查环境 - name: 安装依赖 # pnpm install + eas-cli - name: 构建 APK # 注入版本号 → eas build --local - name: 发布 Release # 创建 Release + 上传 APK

关键环境变量:

变量来源用途
EXPO_TOKEN秘钥仓库(importsEAS CLI 认证
EXPO_PUBLIC_APP_ENV.cnb.ymlenv构建环境(preview/production)
CNB_BRANCHCNB 内置变量Tag 名称,用作版本号
GRADLE_OPTS.cnb.ymlenv限制 Gradle JVM 内存防 OOM
NODE_OPTIONS.cnb.ymlenv限制 Node.js 内存防 OOM

Tag 命名规范:

格式示例说明
v{x}.{y}.{z}v1.0.0正式版本
v{x}.{y}.{z}-beta.{n}v2.0.0-beta.1Beta 测试版
v{x}.{y}.{z}-rc.{n}v1.5.0-rc.2Release Candidate

⚠️ Tag 必须以 v 开头才会触发构建,非 v 开头的 Tag 会被跳过。


❓ 常见问题

构建报权限错误(Entity not authorized)

app.config.ts 中的 EXPO_ACCOUNT_OWNEREAS_PROJECT_IDslug 必须与你的 Expo 项目匹配。

构建被 OOM 杀掉(signal: 9)

调整 .cnb.yml 中的 GRADLE_OPTSNODE_OPTIONS 内存限制,以及 metro.config.js 中的 maxWorkers

EXPO_TOKEN 未读取到

检查秘钥仓库中 env.ymlallow_slugs 是否包含你的仓库路径,allow_events 是否包含 tag_push

slug does not match

app.config.ts 中的 slug 必须与 Expo 项目的 slug 完全一致。


📚 文档

资源链接
📘 开发指南DEVELOPMENT-GUIDE.md
📗 原始模板文档obytes/react-native-template-obytes
📕 Expo 文档docs.expo.dev
📙 CNB 文档cnb.cool

🤝 贡献

欢迎提交 Issue 和 Pull Request!

  1. Fork 本仓库
  2. 创建你的特性分支 (git checkout -b feature/amazing-feature)
  3. 提交你的更改 (git commit -m 'feat: add amazing feature')
  4. 推送到分支 (git push origin feature/amazing-feature)
  5. 打开一个 Pull Request

📄 License

本项目基于 MIT License 开源。


如果这个项目对你有帮助,请给一个 ⭐ Star!

Made with ❤️ by the community

About

基于 React Native Template Obytes 模板,集成 CNB 流水线,打 Tag 自动构建 Android APK。Expo SDK 54 + TypeScript + TailwindCSS。

react-nativetemplatecnb
38.54 MiB
0 forks1 stars1 branches2 TagREADMEMIT license
Language
TypeScript87.5%
JavaScript10.1%
CSS2.1%
Shell0.3%