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 开发)

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

安装 Xcode (仅 iOS 开发)

• 从 Mac App Store 安装 Xcode

2. 创建新项目

方法1：使用 npx（推荐）

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

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

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

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

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

iOS

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

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

5. 常用依赖安装

# 导航 (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

cd android
./gradlew assembleRelease

iOS

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

8. 常见问题解决

1. Android 模拟器无法连接：

   • 确保模拟器正在运行
   • 运行 adb devices 检查设备是否被识别

2. iOS 构建失败：

   • 确保 Xcode 命令行工具已安装
   • 运行 pod install (在 ios 目录下)

3. 依赖冲突：

   • 使用 npm ls 检查依赖树
   • 考虑使用 yarn 或 npm 的依赖解析功能

9.如果仍然遇到问题

1. 清理全局安装：

   npm uninstall -g create-react-app
   

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

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

3. 尝试清除 npm 缓存：

   npm cache clean --force
   

4. 尝试使用 yarn：

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