Ignite 项目 app 目录结构全解入口文件、模块划分与内置组件体系【免费下载链接】igniteInfinite Reds battle-tested React Native project boilerplate, along with a CLI, component/model generators, and more! 9 years of continuous development and counting.项目地址: https://gitcode.com/GitHub_Trending/ig/ignite导读本文以 Infinite Red 出品的 React Native 样板工程 Ignite 为对象系统拆解其app目录的整体结构从唯一入口文件app.tsx的启动流程到 components、config、i18n、context、navigators、screens、services、theme、utils 等各子目录的职责划分与内部实现。读完本文你将掌握 Ignite 工程中业务代码的组织范式理解启动链路上字体加载、国际化、导航恢复、安全区与错误处理等关键环节并能在自己的 Ignite 项目中快速定位与扩展对应模块。一、app 目录你 90% 时间所在的战场在 Ignite 样板工程中app目录承载了绝大部分业务代码。官方文档的定位非常直白The vast majority of your code will live in theappfolder. This is where youll spend most of your time.绝大多数代码都放在app目录这里是你投入大部分时间的地方。打开 boilerplate/app 可以看到该目录下只有一个顶层文件 app.tsx其余全部是子目录分别管理不同类型的代码目录职责详细文档app.tsx应用主入口负责应用启动引导app.tsx.mdcomponents可复用的内置 UI 组件轻量设计系统Components.mdconfig开发/生产环境配置文件Config.mddevtoolsReactotron 等开发工具配置Devtools.mdi18n国际化i18n配置与翻译文件Internationalization.mdcontextReact Context 提供者与状态管理Context.mdnavigatorsReact Navigation 导航器定义Navigation.mdscreens应用的主要屏幕Screens.mdservices服务层如 API 客户端Services.mdtheme主题文件颜色、字体、间距等Theming.mdutils工具函数与自定义 HooksUtils.md这个入口文件 分类目录的扁平结构是 Ignite 多年实战沉淀出的组织范式目录即模块边界职责清晰新成员可以迅速定位到对应模块。二、app.tsx应用启动的总指挥2.1 与根目录 index.tsx 的分工app.tsx 是应用的真正业务入口但要注意它不是Expo/React Native 的进程入口。项目根目录的index.tsx才是原生层启动入口它只负责完成 splash screen 初始化后立即加载app/app.tsx。二者分工如下根目录 index.tsxExpo/React Native 原生入口负责注册根组件app/app.tsx业务入口承载应用的初始化与启动引导逻辑。2.2 启动时承担的职责从 app.tsx 源码 可以看出App组件集中处理了以下启动任务加载字体通过expo-font的useFontsHook 加载customFontsToLoad定义于 theme/typography.ts初始化国际化调用initI18n()初始化 i18next随后加载date-fns的 localeloadDateFnsLocale()恢复导航状态通过useNavigationPersistence(storage, NAVIGATION_PERSISTENCE_KEY)从本地存储恢复上次的导航状态确保一切就绪后再展示界面在导航状态恢复、i18n 初始化完成、字体加载成功或加载失败之前组件返回null不渲染任何内容此时用户看到的是原生层设置的背景色设置安全区提供者用SafeAreaProviderreact-native-safe-area-context包裹全局并传入initialWindowMetrics渲染错误边界与错误屏由导航器层面接入的错误处理体系兜底启用深链接Deep Linking基于expo-linking的Linking.createURL(/)生成前缀配合路由映射配置注入AppNavigator的linking属性。2.3 关键配置解读源码中定义了导航状态持久化键与 Web 端深链接路由映射app.tsx#L36-L57export const NAVIGATION_PERSISTENCE_KEY NAVIGATION_STATE const prefix Linking.createURL(/) const config { screens: { Login: { path: }, Welcome: welcome, Demo: { screens: { DemoShowroom: { path: showroom/:queryIndex?/:itemIndex? }, DemoDebug: debug, DemoPodcastList: podcast, DemoCommunity: community, }, }, }, }可以看到 DemoShowroom 屏幕支持:queryIndex?与:itemIndex?两个可选路径参数这为 Web 端分享链接与演示路由提供了基础。启动渲染结构app.tsx#L96-L114为SafeAreaProvider → KeyboardProvider → AuthProvider → ThemeProvider → AppNavigator其中AuthProvider与键盘控制器react-native-keyboard-controller分别负责鉴权上下文与键盘避让。:::tip 开发模式下app.tsx顶部还会通过require(./devtools/ReactotronConfig.ts)加载 Reactotron 调试配置前提是 metro 的inlineRequires保持开启。 :::三、components内置的轻量设计系统components 目录内置了一套可高度定制的组件集官方将其定位为轻量设计系统——强调灵活性与可定制性优先于开箱即用的强大程度。它适用于完全自定义的设计风格如果你需要现成的成熟 UI 方案也可搭配 UI Kitten、RN Elements 等第三方库。各组件要点与典型用法如下详细文档见 Components.mdAutoImageReact NativeImage的封装自动缩放图片以适配容器。AutoImage source{{ uri: https://... }} /详见 AutoImage.mdButton基于TouchableOpacity的按钮支持text/tx国际化键、preset、style、textStyle等属性也可通过 children 自定义内容详见 Button.mdCard用于纵向展示相关信息的容器支持preset、verticalAlignment、heading、content、footer及各自的样式与文本属性详见 Card.mdCheckbox / Radio / Switch三种布尔值选择组件均支持value、onValueChange、labelTx、labelStyle、containerStyle其中 Switch 还支持accessibilityModeicon分别见 Checkbox.md、Radio.md、Switch.mdEmptyState无数据时的占位引导组件可配置图片imageSource、标题、正文与按钮见 EmptyState.mdHeader屏幕顶栏承载导航按钮与标题支持leftIcon/rightIcon、onLeftPress/onRightPress见 Header.mdIcon图标渲染组件支持icon、color、size、containerStyle与onPress见 Icon.mdScreen屏幕容器统一处理滚动、安全区与键盘避让如Screen presetscroll见 Screen.mdText增强版文本组件加入国际化tx/txOptions与属性预设presetheader见 Text.mdTextField由TextInput与标签组成的输入框支持value、onChangeText、labelTx、placeholderTx、forwardedRef等见 TextField.md。当内置组件无法满足需求时可借助 Ignite CLI 的组件生成器创建自定义组件npx ignite-cli generate component MyCustomButton生成器会在app/components下创建MyCustomButton.tsx对应的模板位于 ignite/templates/component/NAME.tsx.ejs其生成逻辑可查看 src/tools/generators.ts。四、config开发与生产环境配置config 目录根据是否处于__DEV__模式在开发与生产配置之间切换导入config.base.ts开发与生产共享的配置例如exitRoutes——用于标记哪些路由属于退出路由用户可从该路由退出应用config.dev.ts开发专属配置例如指向开发环境的 API URLconfig.prod.ts生产专属配置index.ts按模式导出对应配置的入口。⚠️安全提醒这些配置文件不应被 gitignore。与服务端不同客户端应用最终打包的是一个包含全部配置变量的 JavaScript bundle任何下载了 App 的用户都能轻易提取其中的明文变量。官方给出的验证方法是打包后直接在 bundle 中搜索某个配置变量值即可找到。敏感信息的安全存储方式请参考 React Native 官方安全文档。五、devtoolsReactotron 调试配置devtools 目录预置了 Reactotron 调试支持同时兼容 Web 与移动端。核心文件 ReactotronConfig.ts 内置了若干实用插件与命令。官方还提供了通过reactotron.onCustomCommand添加自定义调试命令的范式见 Devtools.mdreactotron.onCustomCommand({ title: Reset Navigation State, description: Resets the navigation state, command: resetNavigation, handler: () { Reactotron.log(resetting navigation state) resetRoot({ index: 0, routes: [] }) }, })注意 ReactotronClient.ts 与 ReactotronClient.web.ts 分别对应原生与 Web 平台由平台解析自动选择。六、i18n多语言国际化i18n 目录基于 i18next 搭建国际化体系默认支持英语、阿拉伯语、韩语、法语、日语与印地语应用启动时自动检测语言并切换。由于内置了阿拉伯语这一 RTL从右到左语言后续新增任何 RTL 语言都能开箱即用。如需移除 RTL 支持官方给出了三步操作在 i18n/index.ts 中删除 RTL 语言导入、对应的语言对象引用以及原生层允许/强制 RTL 的两行代码I18nManager.allowRTL(isRTL) I18nManager.forceRTL(isRTL)删除所有使用导出变量isRTL的相关逻辑将组件中的txsome:i18n.key全部替换为textSome Text如Text textSome Text /。新增语言时参照 i18next 官方文档在app/i18n/index.ts中注册对应翻译资源即可。七、contextReact Context 与状态管理context 目录用于存放 React Context Provider 或任何你选择的状态管理方案。历史上 Ignite 曾默认内置 mobx-state-treeMST但随着团队项目状态管理方案的多样化样板工程已改为默认使用简单 React Context。当前目录内置两个示例 ContextAuthContext提供演示应用的简易鉴权状态管理通过 MMKV Hooks 持久化数据应用通过useAuthHook 消费EpisodeContext管理演示播客屏幕中的剧集列表提供useEpisodesHook 用于拉取剧集并维护列表状态。对于更复杂的应用文档也列出了可选的状态管理方案Redux Toolkit、MobX、MobX State Tree、Zustand、Legend State、React QueryTanStack Query、XState 等可按项目复杂度取舍。八、navigators导航体系8.1 基础结构Ignite 当前版本使用React Navigation v7所有导航器位于 navigators 目录核心文件为 AppNavigator.tsx。另有 navigationUtilities.ts 提供实用函数getActiveRouteName、useBackButtonHandler、useNavigationPersistence等。创建新导航器可使用 CLI 生成器npx ignite-cli generate navigator MyNavigator模板见 ignite/templates/navigator/NAMENavigator.tsx.ejs。8.2 鉴权流程模式Ignite 遵循 React Navigation 官方的 Authentication Flows 模式示例代码如下详见 Navigation.mdconst AppStack () { const { isAuthenticated } useAuth() return ( Stack.Navigator screenOptions{{ headerShown: false }} initialRouteName{isAuthenticated ? Welcome : Login} {isAuthenticated ? ( Stack.Screen nameWelcome component{WelcomeScreen} / Stack.Screen nameDemo component{DemoNavigator} / / ) : ( Stack.Screen nameLogin component{LoginScreen} / / )} /Stack.Navigator ) }未登录时导航器中仅包含LoginScreen登录后LoginScreen被移出用户进入WelcomeScreen与DemoNavigator下的各屏幕。8.3 Tab 导航与嵌套底部 Tab 导航定义在 DemoNavigator.tsx 中可通过常规 navigation API 编程式切换 Tabnavigation.navigate(DemoDebug)Tab 既可指向单个屏幕也可指向一个嵌套的 Stack 导航器例如收件箱场景Tab 内先展示列表点击进入消息详情const InboxStack createNativeStackNavigator() function InboxStackScreen() { return ( InboxStack.Navigator InboxStack.Screen nameList component{ListScreen} / InboxStack.Screen nameMessageDetails component{MessageDetailsScreen} / /InboxStack.Navigator ) }再以Tab.Screen nameInbox component{InboxStackScreen} /将其挂入 Tab 导航器即可。8.4 侧边抽屉导航Ignite 内置了基于 React Native Gesture Handler 的DrawerLayout实现的抽屉导航示例它是 RN 原生DrawerLayoutAndroid的跨平台替代方案。通过renderNavigationView属性传入侧边栏内容可放置公司 Logo、用户头像、菜单项、退出登录等DrawerLayout还支持自定义开关速度、遮罩位置并提供过渡进度/状态事件。8.5 关于 Expo Router官方说明团队正在评估 Expo Router基于 React Navigation 构建其哲学是任何方案都必须在至少一个完整项目中验证后才进入 Ignite。目前脚手架提供了切换到 Expo Router 的实验性选项。本仓库的 src/app/_layout.tsx 与 src/app/index.tsx 即为实验性的 Expo Router 入口示例。九、screens屏幕层screens 目录存放应用的主要屏幕每个屏幕文件以Screen.tsx结尾如LoginScreen.tsx也可放入子文件夹但官方建议尽量保持扁平。屏幕是应用交互的核心负责渲染 UI/状态、样式、处理用户输入并触发向其他屏幕的导航。官方还推荐将屏幕专属组件与屏幕同目录存放例如仅登录屏使用的LoginForm可放在app/screens/login/LoginForm.tsx若组件被多个屏幕复用则放入components目录。这一约定可从 DemoShowroomScreen 目录下的 demos 子目录结构得到印证。十、services服务层与 API 客户端services 目录放置负责特定任务的代码API 调用、文件系统交互、推送通知等。样板工程仅内置一个 API 客户端服务你可按需添加更多。Ignite 刻意不对后端技术栈做绑定REST、GraphQL、Firebase、Hasura、tRPC、Supabase 等均可但内置了一套经过大型项目验证的 API 模式HTTP 客户端内置 apisauce——Infinite Red 维护的、基于 Axios 的轻量封装比 RN 内置fetch提供更顺滑的开发体验Api 类定义于 services/api/index.ts是添加后端数据获取方法的位置配套的 apiProblem.ts 提供标准化的 API 问题/错误建模并有 apiProblem.test.ts 测试覆盖TanStack Query官方表示正在评估待更多项目验证后再考虑纳入。十一、theme 与 utils视觉体系与工具集themeTheming.md集中管理应用的视觉体系包括颜色colors.ts 与暗色模式 colorsDark.ts、间距spacing.ts、排版typography.ts、时间与动画timing.ts。主题上下文由 context.tsx 提供支持明暗主题切换。utilsUtils.md存放通用工具函数与自定义 Hooks从目录可以看到以下开箱即用的能力storage基于 MMKV 的键值存储封装含 storage.test.ts 测试useHeader.tsx在任意屏幕便捷设置 Header 的 HookuseSafeAreaInsetsStyle.ts安全区 inset 样式计算formatDate.ts、delay.ts、openLinkInBrowser.ts 等常用工具。十二、快速上手建议先读入口通读 app.tsx理解启动链路上字体、i18n、导航恢复、安全区与深链接的协作顺序按目录定位新 UI 组件进components屏幕进screensAPI 进services/api公共函数进utils遵循目录即职责的约定善用生成器用npx ignite-cli generate快速生成 component / screen / navigator模板见 ignite/templates复用导航模式鉴权流程、Tab 嵌套、抽屉导航均有现成示例可参考并配合 navigationUtilities.ts 的useBackButtonHandler、useNavigationPersistence提升开发效率。结语app目录是 Ignite 样板工程的心脏一个清晰可扩展的入口文件加上按职责划分的十个子模块构成了经过 9 年持续迭代验证的项目组织范式。理解这套结构不仅能让你快速上手基于 Ignite 的项目也能为自建 React Native 工程的目录设计提供成熟参考。更多细节可继续查阅 Boilerplate.md 与各子目录的专项文档。【免费下载链接】igniteInfinite Reds battle-tested React Native project boilerplate, along with a CLI, component/model generators, and more! 9 years of continuous development and counting.项目地址: https://gitcode.com/GitHub_Trending/ig/ignite创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/9/13 8:16:48 · 阅读 1.2k Ignite 项目 app 目录结构全解：入口文件、模块划分与内置组件体系
Ignite 项目 app 目录结构全解入口文件、模块划分与内置组件体系【免费下载链接】igniteInfinite Reds battle-tested React Native project boilerplate, along with a CLI, component/model generators, and more! 9 years of continuous development and counting.项目地址: https://gitcode.com/GitHub_Trending/ig/ignite导读本文以 Infinite Red 出品的 React Native 样板工程 Ignite 为对象系统拆解其app目录的整体结构从唯一入口文件app.tsx的启动流程到 components、config、i18n、context、navigators、screens、services、theme、utils 等各子目录的职责划分与内部实现。读完本文你将掌握 Ignite 工程中业务代码的组织范式理解启动链路上字体加载、国际化、导航恢复、安全区与错误处理等关键环节并能在自己的 Ignite 项目中快速定位与扩展对应模块。一、app 目录你 90% 时间所在的战场在 Ignite 样板工程中app目录承载了绝大部分业务代码。官方文档的定位非常直白The vast majority of your code will live in theappfolder. This is where youll spend most of your time.绝大多数代码都放在app目录这里是你投入大部分时间的地方。打开 boilerplate/app 可以看到该目录下只有一个顶层文件 app.tsx其余全部是子目录分别管理不同类型的代码目录职责详细文档app.tsx应用主入口负责应用启动引导app.tsx.mdcomponents可复用的内置 UI 组件轻量设计系统Components.mdconfig开发/生产环境配置文件Config.mddevtoolsReactotron 等开发工具配置Devtools.mdi18n国际化i18n配置与翻译文件Internationalization.mdcontextReact Context 提供者与状态管理Context.mdnavigatorsReact Navigation 导航器定义Navigation.mdscreens应用的主要屏幕Screens.mdservices服务层如 API 客户端Services.mdtheme主题文件颜色、字体、间距等Theming.mdutils工具函数与自定义 HooksUtils.md这个入口文件 分类目录的扁平结构是 Ignite 多年实战沉淀出的组织范式目录即模块边界职责清晰新成员可以迅速定位到对应模块。二、app.tsx应用启动的总指挥2.1 与根目录 index.tsx 的分工app.tsx 是应用的真正业务入口但要注意它不是Expo/React Native 的进程入口。项目根目录的index.tsx才是原生层启动入口它只负责完成 splash screen 初始化后立即加载app/app.tsx。二者分工如下根目录 index.tsxExpo/React Native 原生入口负责注册根组件app/app.tsx业务入口承载应用的初始化与启动引导逻辑。2.2 启动时承担的职责从 app.tsx 源码 可以看出App组件集中处理了以下启动任务加载字体通过expo-font的useFontsHook 加载customFontsToLoad定义于 theme/typography.ts初始化国际化调用initI18n()初始化 i18next随后加载date-fns的 localeloadDateFnsLocale()恢复导航状态通过useNavigationPersistence(storage, NAVIGATION_PERSISTENCE_KEY)从本地存储恢复上次的导航状态确保一切就绪后再展示界面在导航状态恢复、i18n 初始化完成、字体加载成功或加载失败之前组件返回null不渲染任何内容此时用户看到的是原生层设置的背景色设置安全区提供者用SafeAreaProviderreact-native-safe-area-context包裹全局并传入initialWindowMetrics渲染错误边界与错误屏由导航器层面接入的错误处理体系兜底启用深链接Deep Linking基于expo-linking的Linking.createURL(/)生成前缀配合路由映射配置注入AppNavigator的linking属性。2.3 关键配置解读源码中定义了导航状态持久化键与 Web 端深链接路由映射app.tsx#L36-L57export const NAVIGATION_PERSISTENCE_KEY NAVIGATION_STATE const prefix Linking.createURL(/) const config { screens: { Login: { path: }, Welcome: welcome, Demo: { screens: { DemoShowroom: { path: showroom/:queryIndex?/:itemIndex? }, DemoDebug: debug, DemoPodcastList: podcast, DemoCommunity: community, }, }, }, }可以看到 DemoShowroom 屏幕支持:queryIndex?与:itemIndex?两个可选路径参数这为 Web 端分享链接与演示路由提供了基础。启动渲染结构app.tsx#L96-L114为SafeAreaProvider → KeyboardProvider → AuthProvider → ThemeProvider → AppNavigator其中AuthProvider与键盘控制器react-native-keyboard-controller分别负责鉴权上下文与键盘避让。:::tip 开发模式下app.tsx顶部还会通过require(./devtools/ReactotronConfig.ts)加载 Reactotron 调试配置前提是 metro 的inlineRequires保持开启。 :::三、components内置的轻量设计系统components 目录内置了一套可高度定制的组件集官方将其定位为轻量设计系统——强调灵活性与可定制性优先于开箱即用的强大程度。它适用于完全自定义的设计风格如果你需要现成的成熟 UI 方案也可搭配 UI Kitten、RN Elements 等第三方库。各组件要点与典型用法如下详细文档见 Components.mdAutoImageReact NativeImage的封装自动缩放图片以适配容器。AutoImage source{{ uri: https://... }} /详见 AutoImage.mdButton基于TouchableOpacity的按钮支持text/tx国际化键、preset、style、textStyle等属性也可通过 children 自定义内容详见 Button.mdCard用于纵向展示相关信息的容器支持preset、verticalAlignment、heading、content、footer及各自的样式与文本属性详见 Card.mdCheckbox / Radio / Switch三种布尔值选择组件均支持value、onValueChange、labelTx、labelStyle、containerStyle其中 Switch 还支持accessibilityModeicon分别见 Checkbox.md、Radio.md、Switch.mdEmptyState无数据时的占位引导组件可配置图片imageSource、标题、正文与按钮见 EmptyState.mdHeader屏幕顶栏承载导航按钮与标题支持leftIcon/rightIcon、onLeftPress/onRightPress见 Header.mdIcon图标渲染组件支持icon、color、size、containerStyle与onPress见 Icon.mdScreen屏幕容器统一处理滚动、安全区与键盘避让如Screen presetscroll见 Screen.mdText增强版文本组件加入国际化tx/txOptions与属性预设presetheader见 Text.mdTextField由TextInput与标签组成的输入框支持value、onChangeText、labelTx、placeholderTx、forwardedRef等见 TextField.md。当内置组件无法满足需求时可借助 Ignite CLI 的组件生成器创建自定义组件npx ignite-cli generate component MyCustomButton生成器会在app/components下创建MyCustomButton.tsx对应的模板位于 ignite/templates/component/NAME.tsx.ejs其生成逻辑可查看 src/tools/generators.ts。四、config开发与生产环境配置config 目录根据是否处于__DEV__模式在开发与生产配置之间切换导入config.base.ts开发与生产共享的配置例如exitRoutes——用于标记哪些路由属于退出路由用户可从该路由退出应用config.dev.ts开发专属配置例如指向开发环境的 API URLconfig.prod.ts生产专属配置index.ts按模式导出对应配置的入口。⚠️安全提醒这些配置文件不应被 gitignore。与服务端不同客户端应用最终打包的是一个包含全部配置变量的 JavaScript bundle任何下载了 App 的用户都能轻易提取其中的明文变量。官方给出的验证方法是打包后直接在 bundle 中搜索某个配置变量值即可找到。敏感信息的安全存储方式请参考 React Native 官方安全文档。五、devtoolsReactotron 调试配置devtools 目录预置了 Reactotron 调试支持同时兼容 Web 与移动端。核心文件 ReactotronConfig.ts 内置了若干实用插件与命令。官方还提供了通过reactotron.onCustomCommand添加自定义调试命令的范式见 Devtools.mdreactotron.onCustomCommand({ title: Reset Navigation State, description: Resets the navigation state, command: resetNavigation, handler: () { Reactotron.log(resetting navigation state) resetRoot({ index: 0, routes: [] }) }, })注意 ReactotronClient.ts 与 ReactotronClient.web.ts 分别对应原生与 Web 平台由平台解析自动选择。六、i18n多语言国际化i18n 目录基于 i18next 搭建国际化体系默认支持英语、阿拉伯语、韩语、法语、日语与印地语应用启动时自动检测语言并切换。由于内置了阿拉伯语这一 RTL从右到左语言后续新增任何 RTL 语言都能开箱即用。如需移除 RTL 支持官方给出了三步操作在 i18n/index.ts 中删除 RTL 语言导入、对应的语言对象引用以及原生层允许/强制 RTL 的两行代码I18nManager.allowRTL(isRTL) I18nManager.forceRTL(isRTL)删除所有使用导出变量isRTL的相关逻辑将组件中的txsome:i18n.key全部替换为textSome Text如Text textSome Text /。新增语言时参照 i18next 官方文档在app/i18n/index.ts中注册对应翻译资源即可。七、contextReact Context 与状态管理context 目录用于存放 React Context Provider 或任何你选择的状态管理方案。历史上 Ignite 曾默认内置 mobx-state-treeMST但随着团队项目状态管理方案的多样化样板工程已改为默认使用简单 React Context。当前目录内置两个示例 ContextAuthContext提供演示应用的简易鉴权状态管理通过 MMKV Hooks 持久化数据应用通过useAuthHook 消费EpisodeContext管理演示播客屏幕中的剧集列表提供useEpisodesHook 用于拉取剧集并维护列表状态。对于更复杂的应用文档也列出了可选的状态管理方案Redux Toolkit、MobX、MobX State Tree、Zustand、Legend State、React QueryTanStack Query、XState 等可按项目复杂度取舍。八、navigators导航体系8.1 基础结构Ignite 当前版本使用React Navigation v7所有导航器位于 navigators 目录核心文件为 AppNavigator.tsx。另有 navigationUtilities.ts 提供实用函数getActiveRouteName、useBackButtonHandler、useNavigationPersistence等。创建新导航器可使用 CLI 生成器npx ignite-cli generate navigator MyNavigator模板见 ignite/templates/navigator/NAMENavigator.tsx.ejs。8.2 鉴权流程模式Ignite 遵循 React Navigation 官方的 Authentication Flows 模式示例代码如下详见 Navigation.mdconst AppStack () { const { isAuthenticated } useAuth() return ( Stack.Navigator screenOptions{{ headerShown: false }} initialRouteName{isAuthenticated ? Welcome : Login} {isAuthenticated ? ( Stack.Screen nameWelcome component{WelcomeScreen} / Stack.Screen nameDemo component{DemoNavigator} / / ) : ( Stack.Screen nameLogin component{LoginScreen} / / )} /Stack.Navigator ) }未登录时导航器中仅包含LoginScreen登录后LoginScreen被移出用户进入WelcomeScreen与DemoNavigator下的各屏幕。8.3 Tab 导航与嵌套底部 Tab 导航定义在 DemoNavigator.tsx 中可通过常规 navigation API 编程式切换 Tabnavigation.navigate(DemoDebug)Tab 既可指向单个屏幕也可指向一个嵌套的 Stack 导航器例如收件箱场景Tab 内先展示列表点击进入消息详情const InboxStack createNativeStackNavigator() function InboxStackScreen() { return ( InboxStack.Navigator InboxStack.Screen nameList component{ListScreen} / InboxStack.Screen nameMessageDetails component{MessageDetailsScreen} / /InboxStack.Navigator ) }再以Tab.Screen nameInbox component{InboxStackScreen} /将其挂入 Tab 导航器即可。8.4 侧边抽屉导航Ignite 内置了基于 React Native Gesture Handler 的DrawerLayout实现的抽屉导航示例它是 RN 原生DrawerLayoutAndroid的跨平台替代方案。通过renderNavigationView属性传入侧边栏内容可放置公司 Logo、用户头像、菜单项、退出登录等DrawerLayout还支持自定义开关速度、遮罩位置并提供过渡进度/状态事件。8.5 关于 Expo Router官方说明团队正在评估 Expo Router基于 React Navigation 构建其哲学是任何方案都必须在至少一个完整项目中验证后才进入 Ignite。目前脚手架提供了切换到 Expo Router 的实验性选项。本仓库的 src/app/_layout.tsx 与 src/app/index.tsx 即为实验性的 Expo Router 入口示例。九、screens屏幕层screens 目录存放应用的主要屏幕每个屏幕文件以Screen.tsx结尾如LoginScreen.tsx也可放入子文件夹但官方建议尽量保持扁平。屏幕是应用交互的核心负责渲染 UI/状态、样式、处理用户输入并触发向其他屏幕的导航。官方还推荐将屏幕专属组件与屏幕同目录存放例如仅登录屏使用的LoginForm可放在app/screens/login/LoginForm.tsx若组件被多个屏幕复用则放入components目录。这一约定可从 DemoShowroomScreen 目录下的 demos 子目录结构得到印证。十、services服务层与 API 客户端services 目录放置负责特定任务的代码API 调用、文件系统交互、推送通知等。样板工程仅内置一个 API 客户端服务你可按需添加更多。Ignite 刻意不对后端技术栈做绑定REST、GraphQL、Firebase、Hasura、tRPC、Supabase 等均可但内置了一套经过大型项目验证的 API 模式HTTP 客户端内置 apisauce——Infinite Red 维护的、基于 Axios 的轻量封装比 RN 内置fetch提供更顺滑的开发体验Api 类定义于 services/api/index.ts是添加后端数据获取方法的位置配套的 apiProblem.ts 提供标准化的 API 问题/错误建模并有 apiProblem.test.ts 测试覆盖TanStack Query官方表示正在评估待更多项目验证后再考虑纳入。十一、theme 与 utils视觉体系与工具集themeTheming.md集中管理应用的视觉体系包括颜色colors.ts 与暗色模式 colorsDark.ts、间距spacing.ts、排版typography.ts、时间与动画timing.ts。主题上下文由 context.tsx 提供支持明暗主题切换。utilsUtils.md存放通用工具函数与自定义 Hooks从目录可以看到以下开箱即用的能力storage基于 MMKV 的键值存储封装含 storage.test.ts 测试useHeader.tsx在任意屏幕便捷设置 Header 的 HookuseSafeAreaInsetsStyle.ts安全区 inset 样式计算formatDate.ts、delay.ts、openLinkInBrowser.ts 等常用工具。十二、快速上手建议先读入口通读 app.tsx理解启动链路上字体、i18n、导航恢复、安全区与深链接的协作顺序按目录定位新 UI 组件进components屏幕进screensAPI 进services/api公共函数进utils遵循目录即职责的约定善用生成器用npx ignite-cli generate快速生成 component / screen / navigator模板见 ignite/templates复用导航模式鉴权流程、Tab 嵌套、抽屉导航均有现成示例可参考并配合 navigationUtilities.ts 的useBackButtonHandler、useNavigationPersistence提升开发效率。结语app目录是 Ignite 样板工程的心脏一个清晰可扩展的入口文件加上按职责划分的十个子模块构成了经过 9 年持续迭代验证的项目组织范式。理解这套结构不仅能让你快速上手基于 Ignite 的项目也能为自建 React Native 工程的目录设计提供成熟参考。更多细节可继续查阅 Boilerplate.md 与各子目录的专项文档。【免费下载链接】igniteInfinite Reds battle-tested React Native project boilerplate, along with a CLI, component/model generators, and more! 9 years of continuous development and counting.项目地址: https://gitcode.com/GitHub_Trending/ig/ignite创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考