react navite环境与工程化

如果你说的是 React Native 的开发环境搭建 + 工程化体系，我建议不要只停留在"能跑起来"，而是从一开始就把项目按中大型项目的方式搭好。

一、React Native 技术栈建议

目前可以按这个思路：

bash 复制代码

React Native
├── TypeScript              # 类型系统
├── React Navigation        # 路由
├── Zustand / Redux Toolkit # 状态管理
├── TanStack Query          # 服务端数据
├── Axios / Fetch           # HTTP
├── ESLint                  # 代码检查
├── Prettier                # 格式化
├── Husky + lint-staged     # Git 提交检查
├── Jest                    # 单元测试
├── Detox                   # E2E
├── Metro                   # JS 打包
└── Fastlane / CI/CD        # 自动构建发布

如果是新项目，我更推荐：

React Native + TypeScript + Expo / Expo Modules + React Navigation + Zustand + TanStack Query

除非你有非常明确的原生定制需求，否则不建议一上来就堆大量原生配置。

二、开发环境

1. Node.js

建议使用 Node.js LTS，并通过 nvm 管理。

Windows 可以使用：

css 复制代码

nvm install --lts
nvm use --lts

node -v
npm -v

也可以使用 pnpm：

sql 复制代码

corepack enable
corepack prepare pnpm@latest --activate

pnpm -v

我个人更推荐：

复制代码

Node.js
  ↓
Corepack
  ↓
pnpm

2. Android 环境

需要：

arduino 复制代码

Android Studio
├── Android SDK
├── Android SDK Platform
├── Android SDK Build-Tools
├── Android Emulator
└── Android SDK Command-line Tools

然后配置：

复制代码

ANDROID_HOME

Windows 一般类似：

shell 复制代码

%LOCALAPPDATA%\Android\Sdk

检查：

css 复制代码

adb --version

以及：

复制代码

adb devices

能看到模拟器或者真机，就基本 OK。

3. iOS 环境

如果开发 iOS：

scss 复制代码

macOS
├── Xcode
├── Command Line Tools
├── CocoaPods
├── Ruby
└── iOS Simulator

检查：

复制代码

xcodebuild -version

以及：

css 复制代码

pod --version

注意：

iOS 原生构建必须依赖 macOS + Xcode。

Windows 可以开发 React Native / Android，但不能完整进行本地 iOS 原生构建。

三、创建项目

如果你准备使用 Expo：

perl 复制代码

npx create-expo-app@latest my-app
cd my-app
npm start

或者 pnpm：

perl 复制代码

pnpm create expo-app my-app
cd my-app
pnpm start

如果明确需要 React Native Community CLI，则：

java 复制代码

npx @react-native-community/cli@latest init MyApp

怎么选？

场景	推荐
普通 App	Expo
快速开发 MVP	Expo
商业 App	Expo + Development Build
需要大量原生代码	RN CLI / Expo + Prebuild
学习 RN 原理	RN CLI
Android/iOS 双端	Expo
已经有成熟原生工程	RN CLI

现在不建议简单理解成：

Expo = 玩具，RN CLI = 正式项目

这个观念已经比较过时了。

四、工程目录

一个比较舒服的结构：

css 复制代码

src/
├── api/
│   ├── client.ts
│   ├── user.ts
│   └── product.ts
│
├── components/
│   ├── Button/
│   ├── Input/
│   └── Loading/
│
├── screens/
│   ├── Home/
│   ├── Login/
│   └── Profile/
│
├── navigation/
│   ├── RootNavigator.tsx
│   ├── AuthNavigator.tsx
│   └── MainNavigator.tsx
│
├── stores/
│   ├── auth.ts
│   └── app.ts
│
├── hooks/
│   ├── useAuth.ts
│   └── useUser.ts
│
├── services/
│   ├── storage.ts
│   └── analytics.ts
│
├── utils/
│   ├── format.ts
│   └── validation.ts
│
├── constants/
│   ├── colors.ts
│   └── config.ts
│
├── types/
│   └── index.ts
│
└── assets/
    ├── images/
    ├── icons/
    └── fonts/

核心原则是：

erlang 复制代码

UI
 ↓
hooks
 ↓
store / query
 ↓
service / api
 ↓
backend

不要把所有东西全部塞进 Screen。

五、状态管理不要混在一起

这是 RN 工程化非常重要的一点。

建议把状态分成三类：

① UI 状态

例如：

复制代码

Modal 是否打开
Tab 当前索引
输入框内容
Loading

直接：

scss 复制代码

useState()

② 客户端全局状态

例如：

复制代码

用户登录状态
主题
语言
购物车
App 配置

可以：

复制代码

Zustand

③ 服务端状态

例如：

复制代码

用户信息
商品列表
订单
评论
分页数据

使用：

复制代码

TanStack Query

不要把服务器数据全部塞进 Redux/Zustand。

理想架构：

arduino 复制代码

              React Native UI
                     │
          ┌──────────┴──────────┐
          │                     │
       Zustand            TanStack Query
          │                     │
     Client State         Server State
                                │
                              API

这样项目到了几十个页面以后，会舒服很多。

六、API 层

不要在页面里面直接：

scss 复制代码

fetch('/api/user')

七、环境变量

至少区分：

bash 复制代码

development
test
staging
production

例如：

复制代码

.env.development
.env.staging
.env.production

配置：

复制代码

API_URL
APP_ENV
SENTRY_DSN

最终：

arduino 复制代码

开发环境
    ↓
https://dev-api.xxx.com

测试环境
    ↓
https://test-api.xxx.com

生产环境
    ↓
https://api.xxx.com

不要把环境地址散落在代码里。

八、代码规范

建议项目初始化就配置：

markdown 复制代码

TypeScript
    +
ESLint
    +
Prettier
    +
EditorConfig

再加：

diff 复制代码

Husky
+
lint-staged

提交代码：

sql 复制代码

git add .
git commit

自动执行：

sql 复制代码

ESLint
 ↓
Prettier
 ↓
TypeScript
 ↓
commit

有问题直接阻止提交。

九、Git 分支策略

团队项目可以：

bash 复制代码

main
  │
  ├── develop
  │      │
  │      ├── feature/login
  │      ├── feature/home
  │      └── feature/payment
  │
  └── release/v1.0.0

如果团队比较小，则简单一些：

css 复制代码

main
 ├── feature/*
 ├── fix/*
 └── hotfix/*

重点不是分支多，而是：

禁止直接把未经检查的代码推到生产分支。

十、CI/CD

成熟 RN 项目最终应该做到：

css 复制代码

开发者
  ↓
Git Push
  ↓
Pull Request
  ↓
Lint
  ↓
TypeScript
  ↓
Unit Test
  ↓
Build
  ↓
Code Review
  ↓
Merge
  ↓
自动打包
  ↓
TestFlight / Google Play

例如：

markdown 复制代码

GitHub Actions
      ↓
Android APK / AAB
      ↓
iOS IPA

再进一步：

css 复制代码

main
 ↓
自动构建
 ↓
Staging
 ↓
QA
 ↓
Production

十一、你真正需要关注的 RN 工程化

如果你是准备系统学习 React Native 工程化，我建议按照这个顺序：

markdown 复制代码

① Node / npm / pnpm
        ↓
② React / TypeScript
        ↓
③ React Native 基础
        ↓
④ Expo / RN CLI
        ↓
⑤ Android / iOS 原生环境
        ↓
⑥ React Navigation
        ↓
⑦ Zustand
        ↓
⑧ TanStack Query
        ↓
⑨ API / Axios
        ↓
⑩ ESLint / Prettier
        ↓
⑪ Git / Husky
        ↓
⑫ Jest / E2E
        ↓
⑬ 环境变量
        ↓
⑭ Android / iOS 打包
        ↓
⑮ CI/CD
        ↓
⑯ 性能优化 / 崩溃监控

如果你的目标是从 0 搭建一个真正能用于工作的 React Native 工程，我建议直接做一套：

React Native + TypeScript + Expo + Zustand + TanStack Query + Axios + React Navigation + ESLint + Prettier + Husky + Jest + GitHub Actions

我也可以进一步直接带你从 Windows 环境开始，一步一步搭建这套 RN 企业级项目模板，包括 Android Studio、Node、JDK、SDK、模拟器、项目目录、路由、状态管理、接口层、环境变量和 CI/CD。