React Native 项目的结构是什么样的？

Question

Accepted Answer

React Native 项目将 **JavaScript/TypeScript 代码** 与 **原生 iOS/Android 项目** 和配置相结合。了解结构和关键文件有助于导航和构建 React Native 应用。

## 结构的关键部分

```text
my-app/
  App.js / App.tsx       → the root component (app entry point)
  src/ (or app/)         → your JS/TS code (components, screens, etc.) — organize here
  package.json           → dependencies and scripts (npm/yarn) — like any JS project
  node_modules/          → installed npm dependencies
  ios/                   → the native iOS project (Xcode) — for bare RN
  android/               → the native Android project (Gradle) — for bare RN
  index.js               → registers the root component
  app.json / app.config  → app config (name, icon) — especially in Expo
  (Expo projects hide ios/android; managed by Expo)
```

## JavaScript 生态系统

```text
→ package.json → dependencies (React Native, navigation, libraries) + scripts
→ npm / yarn → install packages (npm install); the huge npm ecosystem is available
→ Metro → React Native's JavaScript bundler (bundles your JS for the app)
→ Babel → transpiles modern JS/JSX/TypeScript
```

## 组织你的代码

```text
→ Organize src/ into folders (common):
  src/components/ (reusable UI), src/screens/ (screen components),
  src/navigation/, src/services/ (API), src/hooks/, src/utils/, src/store/ (state)
→ Keep code organized as the app grows (separation by feature or type).
```

## 为什么这很重要

理解 React Native 项目的结构是导航、构建和组织 React Native 应用的必要实用知识，因此这是有用的基础知识。

了解 **关键部分** — **App.js/App.tsx 是根组件**（入口点）、你的 **JS/TS 代码位于 `src/`**（你大部分时间所在的地方）、**package.json** 管理依赖项和脚本（如同任何 JavaScript 项目）、以及 **原生 `ios/` 和 `android/` 项目** 存在（对于裸 React Native，而 Expo 管理它们） — 是在 React Native 项目中找到方向的必要条件，React Native 项目结合了 JavaScript 代码和原生项目。

理解 **JavaScript 生态系统** 方面很重要：React Native 项目使用 **package.json 和 npm/yarn** 管理依赖项（具有庞大的 npm 生态系统可用 — 一大优势）、**Metro**（React Native 的打包器）和 Babel — 这反映了 React Native 开发是具有熟悉工具的 JavaScript 开发，对 web 开发者很有价值。

理解如何 **组织代码**（将 `src/` 按功能或类型划分为文件夹 — components、screens、navigation、services、hooks、utils、store）反映了随着项目增长而保持可维护性的良好实践。

由于使用 React Native 需要导航项目结构（JS 代码加原生项目）、通过 package.json 和 npm 管理依赖项、理解打包器并组织代码，并且这些知识是任何 React Native 开发的必要实用基础，因此理解 React Native 项目的结构 — 关键文件、JavaScript 生态系统和代码组织 — 对于使用 React Native 项目是宝贵的、基础性的实用知识，对于构建和维护应用是必要的，也是一项基本能力，特别是对于熟悉 JavaScript/npm 生态系统的开发者来说更容易理解。