react native搭建项目

React Native 项目搭建指南

React Native 是一个使用 JavaScript 和 React 构建跨平台移动应用的框架。以下是搭建 React Native 项目的详细步骤：

1. 环境准备

安装 Node.js

下载并安装 Node.js (推荐 LTS 版本)

安装 Java Development Kit (JDK)

对于 Android 开发，需要安装 JDK 11 或更高版本

安装 Android Studio (仅 Android 开发)

下载并安装 Android Studio
安装 Android SDK 和必要的工具
配置 ANDROID_HOME 环境变量

安装 Xcode (仅 iOS 开发)

从 Mac App Store 安装 Xcode

2. 创建新项目

方法1：使用 npx（推荐）

bash 复制代码

npm uninstall -g react-native-cli @react-native-community/cli
npx @react-native-community/cli init AwesomeProject

方法2：使用 React Native CLI (不推荐)

bash 复制代码

npx react-native init AwesomeProject

这种方式会报错cli.init is not a function

3. 项目结构

创建的项目通常包含以下主要文件和目录：

复制代码

AwesomeProject/
├── android/          # Android 原生代码
├── ios/              # iOS 原生代码
├── node_modules/     # 项目依赖
├── src/              # 通常用于存放应用代码（手动创建）
│   ├── components/   # 可复用组件
│   ├── screens/      # 应用屏幕/页面
│   ├── utils/        # 工具函数
│   └── ...
├── App.js            # 主应用组件
├── index.js          # 应用入口文件
├── package.json      # 项目配置和依赖
└── ...

4. 运行项目

Android

bash 复制代码

# 启动 Metro 打包器
npx react-native start

# 在另一个终端运行 Android 应用
npx react-native run-android

iOS

bash 复制代码

# 启动 Metro 打包器
npx react-native start

# 在另一个终端运行 iOS 应用
npx react-native run-ios

5. 常用依赖安装

bash 复制代码

# 导航 (React Navigation)
npm install @react-navigation/native
npm install react-native-screens react-native-safe-area-context

# 状态管理 (Redux)
npm install @reduxjs/toolkit react-redux

# UI 组件库 (React Native Elements)
npm install react-native-elements

# HTTP 客户端 (Axios)
npm install axios

6. 调试工具

React Native Debugger：独立的调试工具
Flipper：Facebook 的移动应用调试工具
Chrome 开发者工具：可用于调试 JavaScript 代码

7. 构建发布版本

Android

bash 复制代码

cd android
./gradlew assembleRelease

iOS

在 Xcode 中打开 ios/YourProjectName.xcworkspace
选择 Product > Archive
按照向导完成发布流程

8. 常见问题解决

Android 模拟器无法连接：
- 确保模拟器正在运行
- 运行 adb devices 检查设备是否被识别
iOS 构建失败：
- 确保 Xcode 命令行工具已安装
- 运行 pod install (在 ios 目录下)
依赖冲突：
- 使用 npm ls 检查依赖树
- 考虑使用 yarn 或 npm 的依赖解析功能

9.如果仍然遇到问题

清理全局安装：
bash 复制代码
```
npm uninstall -g create-react-app
```

确保使用最新 Node.js 和 npm：

bash 复制代码

npm install -g npm@latest
node -v  # 确保 Node.js 版本 >= 14.0.0

尝试清除 npm 缓存：
bash 复制代码
```
npm cache clean --force
```

尝试使用 yarn：

bash 复制代码

npm install -g yarn
yarn create react-app my-app