building-react-native-application

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

React Native application

React Native 应用

Overview

概述

Opinionated ecosystem for building Expo/React Native apps with a consistent architecture, library stack, and UI system (

src/ui

一套用于构建 Expo/React Native 应用的规范化生态，采用一致的架构、依赖栈和 UI 系统（

src/ui

）。

Tech stack

技术栈

Layer	Choice
Runtime	Expo
Language	TypeScript
Styling	NativeWind, Tailwind CSS, class-variance-authority
Routing	React Navigation (static config, `src/routes` )
Server state	TanStack Query
Client global state	Zustand
HTTP	Axios
Dates	date-fns ( `src/libs/date-utils/` )
Presentational UI	React Native Reusables-style primitives in `src/ui/`

层级	选择
运行时	Expo
语言	TypeScript
样式	NativeWind、Tailwind CSS、class-variance-authority
路由	React Navigation（静态配置， `src/routes` ）
服务端状态	TanStack Query
客户端全局状态	Zustand
HTTP	Axios
日期处理	date-fns（ `src/libs/date-utils/` ）
展示型 UI	`src/ui/` 中采用 React Native Reusables 风格的 primitives

Setup

设置

Item	Required	When	How
Standing rule	required	Scaffold new app	Add - `<target_path>` follows building-react-native-application; load it before changing code there. to root `AGENTS.md` (create when missing) and to root `CLAUDE.md` when it exists without importing `AGENTS.md` ; skip a file that has it

项目	是否必需	使用场景	操作方式
固定规则	必需	搭建新应用	将 - `<target_path>` follows building-react-native-application; load it before changing code there. 添加到根目录 `AGENTS.md` （不存在时创建）；如果根目录存在 `CLAUDE.md` 但未导入 `AGENTS.md` ，也添加到该文件；如果文件中已有则跳过

Agent workflow

Agent 工作流

Follow this skill for Expo/React Native work. Resolve every required Setup row, then match Entry points and every applicable Task types row; open every linked local reference before coding. For component work, open creating-component and follow its decision tree. Platform docs live in each reference’s References section.

对于 Expo/React Native 工作，请遵循本 skill。完成 Setup 中每一个必需项，然后匹配 Entry points 以及 Task types 中所有适用的行；编写代码前，打开每一个关联的本地参考文档。对于组件工作，打开 creating-component 并遵循其中的决策树。平台文档位于每个参考文档的 References 部分。

Entry points

入口

Use the first matching row; combine when the task spans types.

Entry	When	Go to
Component	Building, moving, or recategorizing any component	creating-component
Structure	Folder roles, dependency flow, or where a module belongs	managing-project-structure
Task bundle	API, forms, styling, bootstrap, navigation, keyboard, fonts, splash	Task types table
Lookup	Known doc name or single reference	Reference index

使用第一个匹配项；如果任务跨越多种类型，则组合使用。

入口	使用场景	前往
Component	构建、移动或重新归类任何组件	creating-component
Structure	文件夹职责、依赖流，或模块应放在何处	managing-project-structure
任务组合	API、表单、样式、项目初始化、导航、键盘、字体、启动画面	Task types 表
查询	已知文档名称或单个参考文档	Reference index

Task types

任务类型

Match every row that applies. Open every local link in Docs before coding.

Task type	Docs
New screen / feature	managing-project-structure, creating-feature, creating-route-component, creating-screen-component, creating-component
UI primitive ( `src/ui/` )	creating-component, creating-ui-component, discovering-registry-components, managing-wrapper-components, add-registry-component.cjs
Feature component	creating-component, creating-feature-component, managing-wrapper-components
Bottom sheet	creating-component, creating-bottom-sheet-component, managing-wrapper-components
Async / list UI	creating-component, creating-async-component, creating-api, managing-state
Form (single step)	creating-form-component, managing-form-error, managing-state, managing-date
Multi-step form	managing-stepper-hook, managing-stepper-form, creating-form-component, managing-form-error
API + data hooks	creating-api, setting-up-axios, managing-api-error, managing-state, managing-date
Date / time	managing-date
Refactor / move component	creating-component
Styling / theme	setting-up-nativewind, managing-styling, setting-up-theming, setting-up-tailwind-theme, setting-up-navigation-theme, overriding-classname
Navigation components & backgrounds	creating-navigation-component, setting-up-navigation-theme, managing-screen-background
Navigation hooks	creating-route-component, creating-navigation-component
Keyboard	Keyboard controller — Components
Fonts	setting-up-theming, setting-up-tailwind-theme, Expo — Fonts
Splash screen	Expo — SplashScreen
Scaffold new app	scaffolding-application
Project bootstrap	managing-project-structure, managing-environment, managing-linting, managing-package-installs, setting-up-nativewind, setting-up-registry-components
Routing only	creating-route-component, creating-navigation-component

匹配所有适用的行。编写代码前，打开 Docs 中的每一个本地链接。

任务类型	文档
新屏幕 / 功能	managing-project-structure、creating-feature、creating-route-component、creating-screen-component、creating-component
UI primitive（ `src/ui/` ）	creating-component、creating-ui-component、discovering-registry-components、managing-wrapper-components、add-registry-component.cjs
功能组件	creating-component、creating-feature-component、managing-wrapper-components
Bottom sheet	creating-component、creating-bottom-sheet-component、managing-wrapper-components
异步 / 列表 UI	creating-component、creating-async-component、creating-api、managing-state
单步表单	creating-form-component、managing-form-error、managing-state、managing-date
多步表单	managing-stepper-hook、managing-stepper-form、creating-form-component、managing-form-error
API + 数据 hooks	creating-api、setting-up-axios、managing-api-error、managing-state、managing-date
日期 / 时间	managing-date
重构 / 移动组件	creating-component
样式 / 主题	setting-up-nativewind、managing-styling、setting-up-theming、setting-up-tailwind-theme、setting-up-navigation-theme、overriding-classname
导航组件与背景	creating-navigation-component、setting-up-navigation-theme、managing-screen-background
导航 hooks	creating-route-component、creating-navigation-component
键盘	Keyboard controller — Components
字体	setting-up-theming、setting-up-tailwind-theme、Expo — Fonts
启动画面	Expo — SplashScreen
搭建新应用	scaffolding-application
项目初始化	managing-project-structure、managing-environment、managing-linting、managing-package-installs、setting-up-nativewind、setting-up-registry-components
仅路由	creating-route-component、creating-navigation-component

Reference index

参考资料索引

Reference	Entry	Layer	Purpose
creating-api		API	HTTP modules under `src/api/`
creating-async-component		Component	Loading, error, and list UI wrappers
creating-bottom-sheet-component		Component	Bottom sheet UI in `src/ui/BottomSheet/`
creating-component	Component	Component	Decision tree for any component work
creating-feature		Feature	Feature module folders and barrels
creating-feature-component		Component	Domain UI blocks in features
creating-form-component		Form	Form fields and form shells
creating-navigation-component		Route	Reusable headers, tab bars, drawer content
creating-route-component		Route	`[Name][NavigatorType]` modules in `src/routes/`
creating-screen-component		Feature	Route-facing `*Screen` in features
creating-ui-component		Component	Shared primitives in `src/ui/`
discovering-registry-components		Component	Registry lookup by intent and labels
managing-api-error		API	API error handling patterns
managing-date		Date	date-fns and `src/libs/date-utils/`
managing-environment		Setup	Feature `env.ts` and env vars
managing-form-error		Form	Form validation and error display
managing-linting		Setup	ESLint and Prettier setup
managing-package-installs		Setup	Package manager detection and install scripts
managing-project-structure	Structure	Architecture	Folder layout and dependency flow
managing-screen-background		Route	Screen background vs navigation theme
managing-state		State	TanStack Query hooks and Zustand stores
managing-stepper-form		Form	Multi-step form UI
managing-stepper-hook		Form	Multi-step form state hook
managing-styling		Styling	Styling conventions and tokens
managing-wrapper-components		Component	Wrapper and composition patterns
overriding-classname		Styling	`className` override rules
scaffolding-application		Setup	Expo `blank-typescript` scaffold
setting-up-axios		API	Axios client setup
setting-up-nativewind		Styling	NativeWind install; pnpm isolated JSX runtime
setting-up-navigation-theme		Styling	React Navigation theme objects
setting-up-registry-components		Setup	Registry / `src/ui/` bootstrap
setting-up-theming		Styling	Design tokens and theme CSS
setting-up-tailwind-theme		Styling	Tailwind / NativeWind theme config

参考资料	入口	层级	用途
creating-api		API	`src/api/` 下的 HTTP 模块
creating-async-component		Component	加载、错误和列表 UI 包装器
creating-bottom-sheet-component		Component	`src/ui/BottomSheet/` 中的 Bottom sheet UI
creating-component	Component	Component	任何组件工作的决策树
creating-feature		Feature	功能模块文件夹和 barrel 导出
creating-feature-component		Component	功能中的领域 UI 区块
creating-form-component		Form	表单字段和表单容器
creating-navigation-component		Route	可复用的 headers、tab bars、drawer content
creating-route-component		Route	`src/routes/` 中的 `[Name][NavigatorType]` 模块
creating-screen-component		Feature	功能中面向路由的 `*Screen`
creating-ui-component		Component	`src/ui/` 中共享的 primitives
discovering-registry-components		Component	按意图和标签查找 registry 组件
managing-api-error		API	API 错误处理模式
managing-date		Date	date-fns 和 `src/libs/date-utils/`
managing-environment		Setup	功能 `env.ts` 和环境变量
managing-form-error		Form	表单验证和错误显示
managing-linting		Setup	ESLint 和 Prettier 设置
managing-package-installs		Setup	包管理器检测和安装脚本
managing-project-structure		Structure	文件夹布局和依赖流
managing-screen-background		Route	屏幕背景与导航主题
managing-state		State	TanStack Query hooks 和 Zustand stores
managing-stepper-form		Form	多步表单 UI
managing-stepper-hook		Form	多步表单状态 hook
managing-styling		Styling	样式约定和设计 token
managing-wrapper-components		Component	包装器和组合模式
overriding-classname		Styling	`className` 覆盖规则
scaffolding-application		Setup	Expo `blank-typescript` 脚手架
setting-up-axios		API	Axios 客户端设置
setting-up-nativewind		Styling	NativeWind 安装；pnpm 隔离的 JSX runtime
setting-up-navigation-theme		Styling	React Navigation theme 对象
setting-up-registry-components		Setup	Registry / `src/ui/` 初始化
setting-up-theming		Styling	设计 token 和主题 CSS
setting-up-tailwind-theme		Styling	Tailwind / NativeWind 主题配置