企业官网建设流程全解析

Ignite Bowser项目结构解析：app目录8大模块设计思路，React Native新手必读

【免费下载链接】ignite-bowserBowser is now re-integrated into Ignite CLI! Head to https://github.com/infinitered/ignite to check it out.项目地址: https://gitcode.com/gh_mirrors/ig/ignite-bowser

Ignite Bowser 是 Infinite Red 出品的经典 React Native 样板工程（boilerplate），它的app目录采用「8大模块」的清晰分层设计，成为无数 React Native 新手理解工程结构的入门范本。本文带你一图读懂 Ignite Bowser 项目结构。

为什么选择 Ignite Bowser 学习工程结构？

Ignite Bowser 是 Infinite Red 团队日常使用的生产级模板，技术栈组合非常经典：

• React Native+TypeScript：类型安全，报错前移
• MobX State Tree：结构化状态管理
• React Navigation 5：页面路由
• Storybook / Jest / Detox：组件故事、单元测试、端到端测试

它最大的价值不在代码量，而在目录组织方式——告诉你一个规范的 React Native 项目应该长什么样。

📁 app 目录 8 大模块一览

打开样板工程（见boilerplate/app/），核心目录结构如下：

app ├── components # 可复用组件 ├── screens # 页面级组件 ├── models # MobX State Tree 状态模型 ├── navigation # 路由导航 ├── services # 与外部世界通信的服务 ├── i18n # 多语言翻译 ├── theme # 主题：颜色、间距、字体 ├── utils # 共享工具函数 └── app.tsx # 应用入口

这种「按职责分目录」的思路，正是 React Native 项目结构设计的精华。下面逐个拆解。

1️⃣ components：可复用组件的"零件库"

components存放所有无业务状态的哑组件（dumb components）。每个组件独占一个文件夹，内含组件实现、Storybook 故事文件，以及可选的.props.ts（类型定义）和.presets.ts（预设样式），例如boilerplate/app/components/button/。

所有组件通过桶文件boilerplate/app/components/index.ts统一导出，外部只需import { Button } from "../components"，路径整洁且不易写错。

如上图所示的wallpaper组件背景图，就存放在boilerplate/app/components/wallpaper/目录下，组件与资源就近放置，是样板工程一贯的资源管理策略。

2️⃣ screens：页面级"全屏组件"

screens存放会占据整个屏幕、并参与导航层级的页面组件。样板自带两个示例页面：

• boilerplate/app/screens/welcome-screen/：欢迎页（带 Bowser 吉祥物）
• boilerplate/app/screens/demo-screen/：功能演示页

判断标准：如果一个组件只是屏幕的一部分，放components；如果它是一个完整页面、会被导航器推入栈中，放screens。

3️⃣ models：MobX State Tree 状态核心

models是业务状态的家。样板中boilerplate/app/models/root-store/定义了根存储（RootStore），负责组合所有子模型并注入环境依赖。

特别值得关注boilerplate/app/models/extensions/目录，它提供了三个可复用的模型扩展：

• with-root-store.ts：让任意模型访问根存储
• with-environment.ts：让任意模型访问环境配置（如 API 地址）
• with-status.ts：统一管理 loading/error 状态，自带测试文件

这套「扩展」机制让每个模型都能以.extend(withRootStore)一行代码获得跨模型通信能力，是 Ignite Bowser 状态设计中最优雅的细节。

4️⃣ navigation：路由与状态持久化

boilerplate/app/navigation/基于 React Navigation 5，包含：

• root-navigator.tsx：根导航器，管理顶层页面切换
• primary-navigator.tsx：主栈导航器，管理业务页面栈
• navigation-utilities.tsx：封装返回键处理与导航持久化逻辑

亮点在于导航状态持久化：boilerplate/app/app.tsx中通过useNavigationPersistence把当前页面栈存入存储，App 重启后还能回到上次的位置——这在原生 React Native 项目中需要大量手写代码才能实现。

5️⃣ services：与外部世界通信的桥梁

services存放一切"对外"能力，样板内置两组：

• boilerplate/app/services/api/：基于 apisauce 封装的 REST 客户端，api.ts统一管理请求、api-problem.ts统一处理网络异常、api-config.ts管理配置，分工极其明确
• boilerplate/app/services/reactotron/：Reactotron 调试面板集成

新增推送通知、地图、登录 SDK 等服务时，也应遵循此目录约定。

6️⃣ i18n：多语言即插即用

boilerplate/app/i18n/内置 react-native-i18n 配置，en.json、ja.json分别是英文与日文语言包，translate.ts提供translate()函数。组件中用translate("...")代替硬编码文案，即可实现多语言切换。

7️⃣ theme：设计语言的单一事实来源

boilerplate/app/theme/将视觉规范拆成四个文件：color.ts（颜色）、spacing.ts（间距）、typography.ts（字体）、timing.ts（动画时长），由index.ts统一导出。

好处是全局只改一处即可换肤，且组件中写spacing.md而非魔法数字16，代码可读性大幅提升。

8️⃣ utils：真正共享的工具函数

boilerplate/app/utils/只存放跨模块共享的工具，如storage/（基于 Keychain 的安全存储封装）、delay.ts、validate.ts。

官方原则：如果一个工具只被某个组件或模型使用，就把它就近放置在对应目录里，utils保持精简。

🧩 app 之外：还有这些值得了解

• boilerplate/storybook/：组件故事的注册中心，每个组件都配故事，可视化开发
• boilerplate/test/：Jest 配置与 mock，storyshots为所有组件故事生成快照
• src/commands/generate/：Ignite 生成器源码，ignite generate component/screen/model命令背后的实现，保证新代码风格与样板完全一致

🚀 新手上手建议

1. 先跑起来：安装 Ignite CLI 后执行ignite new MyApp -b bowser，即可得到完整样板
2. 从 app.tsx 读起：入口文件展示了 RootStore 加载、SafeArea、导航容器的装配顺序
3. 善用生成器：ignite generate screen my-screen一键生成规范页面，照着生成的文件学结构，比手写更快

掌握这 8 大模块的分工，你就拥有了一个可长期维护的 React Native 项目骨架，剩下的只是往每个目录里填入你的业务代码。

【免费下载链接】ignite-bowserBowser is now re-integrated into Ignite CLI! Head to https://github.com/infinitered/ignite to check it out.项目地址: https://gitcode.com/gh_mirrors/ig/ignite-bowser