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