适用于您的 React Native 项目的终极文件夹结构

React Native 是一个灵活的框架，让开发者可以自由选择代码结构。然而，这对初学者来说可能是一把双刃剑。虽然它简化了编码，但随着项目规模的扩大，管理起来很快就会变得困难。因此，结构化的文件夹系统有很多好处，例如更好的组织方式、简化的模块管理、遵循编码实践以及为项目增添专业感。

本文讨论了我在 React Native 项目中使用的一种文件夹布局。此结构基于最佳实践，可以根据项目的具体需求进行修改。

在我们进入项目结构之前，让我们先感谢@vinitbhavsar，他提出了该结构的原始想法，但我修改了他的代码版本，使其变得更好。

基础库

axios — 用于网络调用。react
-navigation — 应用程序导航。redux — 应用程序状态管理。redux -persist — 持久化 redux 状态。redux -thunk
—启用异步调度操作。

以下是目录结构的鸟瞰图：

该模板遵循非常简单的项目结构：

源文件夹

该文件夹是应用程序内所有代码的主要容器。

资产文件夹

顾名思义，它包含我们项目的资源。它包含所有静态资源，例如字体和图片。建议将这些资源按每种资源类型组织到单独的子目录中。

组件文件夹

组件是任何 React 项目的基石。此文件夹包含一系列 UI 组件，例如按钮、模态框、输入框、加载器等，可在项目中的各个文件间使用。

常量文件夹

此文件夹存储您拥有的任何类型的常量。

路线文件夹

routes 目录是存放所有导航相关代码的地方。此文件夹包含应用程序的所有路由，包括私有路由、受保护路由以及所有类型的路由。我们甚至可以在这里调用子路由，例如堆栈、标签栏和抽屉。

Redux 文件夹

如果您在应用中使用 Redux，则应为 Redux 文件创建一个单独的文件夹。该 Redux 文件夹应包含以下结构：

actionTypes：包含 Reducer 响应的 Redux 操作类型的对象。
actions：包含 Dispatch 更改存储状态的所有函数。
reducer：包含所有 Redux Reducer。
store：保存应用程序状态的状态容器。
屏幕文件夹

screen 文件夹中的文件指示应用程序的路由。此文件夹中的每个文件都包含其路由。

帮助文件夹

在此文件夹中定义辅助函数。您的应用程序中可能需要一些函数来生成某些特定数据或执行某些特殊操作。最好将它们与组件分开，以提高它们的可重用性并使代码更简洁。

Utils 文件夹

utils 文件夹包含与应用程序的特定功能或模块无关的各种实用功能。它包含任何常见功能，例如 Analytics、Logger、DateTime 等。

App.js

启动整个应用程序的主要组件。

index.js

符合 React-Native 标准的应用程序入口点。

.env

.env 文件是管理第三方密钥的一种好方法，特别是当您打算在应用程序的各个部分使用它们时。

就是这样！请记住，您的文件夹结构可能会根据项目需求和依赖项而有所不同。但是，良好的文件夹结构始终有助于您在项目发展过程中获得良好的开发体验。

想要查看完整代码吗？快来看看吧；

如果您有任何问题或反馈，请随时联系我们！