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-bowserIgnite Bowser 是 Infinite Red 出品的经典 React Native 样板工程boilerplate它的app目录采用「8大模块」的清晰分层设计成为无数 React Native 新手理解工程结构的入门范本。本文带你一图读懂 Ignite Bowser 项目结构。为什么选择 Ignite Bowser 学习工程结构Ignite Bowser 是 Infinite Red 团队日常使用的生产级模板技术栈组合非常经典React NativeTypeScript类型安全报错前移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️⃣ modelsMobX 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 配置与 mockstoryshots为所有组件故事生成快照src/commands/generate/Ignite 生成器源码ignite generate component/screen/model命令背后的实现保证新代码风格与样板完全一致 新手上手建议先跑起来安装 Ignite CLI 后执行ignite new MyApp -b bowser即可得到完整样板从 app.tsx 读起入口文件展示了 RootStore 加载、SafeArea、导航容器的装配顺序善用生成器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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考