React Native 應用程式的資料夾結構

發佈於2024-07-29

Folder Structure of a React Native App

介绍

React Native 是一个强大的框架，用于使用 JavaScript 和 React 构建移动应用程序。当您深入使用 React Native 进行开发时，了解典型 React Native 项目的结构至关重要。每个文件夹和文件都有特定的用途，了解它们的角色将帮助您更有效地管理和导航项目。本文全面概述了 React Native 应用程序的文件夹结构，重点介绍了主要目录的内容和用途：根目录、android/ 文件夹和 ios/ 文件夹。

根目录

React Native 项目的根目录包含管理项目依赖项、配置和入口点的基本文件和文件夹。

关键文件和文件夹

node_modules/：包含通过npm或yarn安装的所有依赖项和子依赖项。通常，您不需要直接触摸此文件夹。
package.json：列出您的项目依赖项、脚本和其他元数据。这对于管理项目依赖关系和脚本至关重要。
package-lock.json或yarn.lock：锁定已安装依赖项的版本，确保不同环境下的一致性。
index.js：React Native应用程序的入口点，通常注册应用程序的主要组件。

核心文件夹

android/：包含原生 Android 代码和配置文件，如果您需要编写或修改原生 Android 代码，则需要此文件。
ios/：包含本机 iOS 代码和配置文件，对于编写或修改本机 iOS 代码至关重要。
app/ 或 src/：通常是 JavaScript/TypeScript 代码的主文件夹，例如组件、屏幕和服务。这是您的大部分应用代码所在的位置。

公共子文件夹（app/或src/内）

组件/：可重用的 UI 组件，有助于在应用程序的不同部分组织和重用 UI 元素。
screens/：代表不同屏幕或视图的组件，使管理导航和单个屏幕变得更容易。
navigations/：导航配置和组件，用于定义应用程序的导航结构。
assets/：图像、字体和其他静态资源，使所有静态资源井然有序。
redux/（如果使用 Redux 进行状态管理）：用于管理应用程序全局状态的操作、reducer 和存储配置。
styles/：跨组件和屏幕使用的通用样式，有助于保持一致的设计并简化样式管理。

配置和实用程序文件

.babelrc 或 babel.config.js：Babel 配置文件，定义 Babel 如何转译你的代码。
.eslintrc.js：ESLint 配置文件，为您的项目设置 linting 规则。
.prettierrc：Prettier配置文件，配置代码格式化规则。
metro.config.js：Metro 捆绑器的配置文件，React Native 使用的 JavaScript 捆绑器。
.gitignore：指定 git 存储库中要忽略的文件和目录。

android/文件夹

android/ 文件夹包含在 Android 设备或模拟器上构建和运行 React Native 应用程序所需的所有本机 Android 代码和配置文件。

关键文件和文件夹

build.gradle：顶级构建文件，您可以在其中添加所有子项目/模块通用的配置选项。
gradle.properties：Gradle 构建系统的配置属性。
gradlew 和 gradlew.bat：分别在基于 Unix 和 Windows 系统上运行 Gradle 命令的脚本。
settings.gradle：指定项目的模块，包括您的项目可能依赖的任何外部库或其他模块。

子文件夹

应用程序/

build.gradle：应用程序模块的构建文件，包含特定于您的应用程序的配置和依赖项。
src/：包含应用程序 Android 部分的源代码。
- 主要的/：
- AndroidManifest.xml：向 Android 构建工具、Android 操作系统和 Google Play 描述有关应用程序的基本信息。
- java/：包含 Java 或 Kotlin 源文件，包括 MainActivity.java 或 MainActivity.kt，应用程序的入口点。
- res/：包含应用程序资源，例如布局、可绘制文件（图像）、字符串和应用程序使用的其他 XML 文件。
- assets/：存储应用程序所需的原始资源文件，例如字体或其他二进制文件。
- jniLibs/：包含您的应用程序依赖的预编译本机库（.so 文件）。

摇篮/

wrapper/：包含有助于 Gradle 构建系统的文件。
- gradle-wrapper.jar：Gradle 包装器的 JAR 文件，允许您构建项目而无需用户安装 Gradle。
- gradle-wrapper.properties：指定要使用的 Gradle 版本和其他属性。