Home / linux / RN

React Native

# create app
npx create-expo-app@latest
# start app
npx expo start
# or
pnpm run android
# or
yarn android --mode release
# This command will move the starter code to the **app-example** directory and create a blank **app** directory where you can start developing.
pnpm run reset-project
# deploy to testflight
npx testflight

Build App

📋 Expo 工作流程全景图

搭建脚手架 → 项目配置 → 本地开发 → 预构建 → 打包 APK → 发布

// package.json
{
  "dependencies": {
    // === Expo 核心 ===
    "expo": "~53.0.0", // Expo SDK 核心
    "expo-status-bar": "~2.2.0", // 状态栏

    // === React 生态 ===
    "react": "19.0.0", // React 核心
    "react-native": "0.79.5", // RN 核心

    // === 路由（如果使用 Expo Router）===
    "expo-router": "~5.1.0", // 文件系统路由
    "expo-linking": "~7.1.0", // Deep Linking
    "expo-splash-screen": "~0.30.0", // 启动屏幕

    // === 开发工具 ===
    "expo-dev-client": "~5.2.0" // 自定义开发客户端
  },
  "devDependencies": {
    "@babel/core": "^7.28.0", // Babel 核心
    "@expo/cli": "^0.24.0", // Expo CLI 工具
    "@types/react": "~19.0.0", // TS 类型定义
    "typescript": "^5.9.0" // TypeScript
  }
}

// eas.json
{
  "cli": {
    "version": ">= 5.0.0"
  },
  "build": {
    // === 开发构建 ===
    "development": {
      "developmentClient": true, // 开发客户端
      "distribution": "internal",
      "android": {
        "gradleCommand": ":app:assembleDebug",
        "buildType": "apk"
      }
    },

    // === 预览构建（测试环境）===
    "preview": {
      "distribution": "internal",
      "android": {
        "buildType": "apk" // 生成 APK
      },
      "env": {
        "EXPO_PUBLIC_ENV": "staging"
      }
    },

    // === 生产构建 ===
    "production": {
      "android": {
        "buildType": "aab" // 生成 AAB（Google Play）
      },
      "env": {
        "EXPO_PUBLIC_ENV": "production"
      }
    }
  },

  "submit": {
    "production": {
      "android": {
        "serviceAccountKeyPath": "./path/to/key.json"
      }
    }
  }
}

// app.json
{
  "ios": {
    "bundleIdentifier": "com.yourcompany.yourapp"
  }
}

Metro Bundler 做什么？

源代码 (.tsx/.ts)
    ↓ Babel 转译
JavaScript Bundle
    ↓ Metro 打包
index.bundle
    ↓ 通过 HTTP 服务
App 加载运行

Prebuild stage

读取配置：解析 app.json 和插件配置
生成原生代码：

Android: AndroidManifest.xml, build.gradle, Java/Kotlin 文件
iOS: Info.plist, Podfile, Objective-C/Swift 文件

链接原生模块：Expo Autolinking（类似 React Native CLI 的 autolinking）
应用插件修改：执行配置插件（Config Plugins）

# Install expo-dev-client
npx expo install expo-dev-client
# Install Cli
npm install -g eas-cli && eas login

# bulild android develop
eas build --platform android --profile development
# build android product
eas build --platform android --profile production

# build ios develop
eas build --platform ios --profile development
# build production
eas build --platform ios --profile production
# submit to ios store
eas submit --platform ios

# submit to Google Play Store
https://docs.expo.dev/deploy/submit-to-app-stores/#google-play-store

# Android 签名密钥（EAS 会自动管理）
eas credentials

# 或手动生成
keytool -genkeypair -v \
  -storetype PKCS12 \
  -keystore my-release-key.keystore \
  -alias my-key-alias \
  -keyalg RSA \
  -keysize 2048 \
  -validity 10000


# 查看构建列表
eas build:list

# 下载最新构建
eas build:download --platform android --latest

EAS Build 工作流：

上传代码到 EAS 服务器
在云端运行 prebuild
安装依赖 (npm install)
执行 Gradle 构建
签名 APK/AAB
上传构建产物到 CDN
返回下载链接

Without Expo

# macOS 需要安装
# 1. Android Studio
# 2. JDK 17
# 3. Android SDK (API 34+)
# 4. 配置环境变量

# Install jdk21 https://www.oracle.com/java/technologies/downloads/#java21
export JAVA_HOME=$(/usr/libexec/java_home -v 21)
export PATH="$JAVA_HOME/bin:$PATH"


export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/platform-tools
export PATH=$PATH:$ANDROID_HOME/cmdline-tools/latest/bin
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin

# 验证环境
adb --version
sdkmanager --list

# create app
npx @react-native-community/cli@latest init AwesomeProject

# 预构建
npx expo prebuild --platform android --clean

# 检查生成的文件
ls -la android/

# build local pkg for development
npx expo run:android

# 本地构建 APK
# 方法 1：使用 Expo CLI（推荐）
npx expo run:android --variant release

# 方法 2：直接使用 Gradle
cd android
./gradlew assembleRelease        # 生成 APK
./gradlew bundleRelease          # 生成 AAB

# APK 位置
# android/app/build/outputs/apk/release/app-release.apk

# start metro in one terminal
yarn start
# start app in the other terminal
yarn android --port 8080 --verbose
# check status
npx react-native doctor
# find the id for the process that is listening on port
sudo lsof -i :8081
# kill process
kill -9 <PID>

签名 APK

# 1. 创建签名配置文件
# android/app/build.gradle
android {
  signingConfigs {
    release {
      storeFile file("my-release-key.keystore")
      storePassword System.getenv("KEYSTORE_PASSWORD")
      keyAlias System.getenv("KEY_ALIAS")
      keyPassword System.getenv("KEY_PASSWORD")
    }
  }

  buildTypes {
    release {
      signingConfig signingConfigs.release
      minifyEnabled true
      proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
    }
  }
}

# 2. 设置环境变量
export KEYSTORE_PASSWORD="your_password"
export KEY_ALIAS="your_alias"
export KEY_PASSWORD="your_key_password"

# 3. 构建签名 APK
cd android
./gradlew assembleRelease

Build Optimization

# 减小 APK 体积
// android/app/build.gradle
android {
  // 启用 ProGuard/R8 代码混淆
  buildTypes {
    release {
      minifyEnabled true
      shrinkResources true
      proguardFiles getDefaultProguardFile('proguard-android-optimize.txt')
    }
  }

  // 拆分 APK（按架构）
  splits {
    abi {
      enable true
      reset()
      include "armeabi-v7a", "arm64-v8a"
      universalApk false
    }
  }
}

// app.json
// 启用 Hermes 引擎
{
  "expo": {
    "jsEngine": "hermes", // 默认已启用
    "android": {
      "enableProguardInReleaseBuilds": true,
      "enableShrinkResourcesInReleaseBuilds": true
    }
  }
}

完整构建流程

┌─────────────────────────────────────────────────────────────┐
│                     Expo 项目源代码                          │
│  (TypeScript/JSX + app.json + eas.json)                    │
└────────────────────────┬────────────────────────────────────┘
                         │
                         ▼
        ┌────────────────────────────────┐
        │   npx expo prebuild            │
        │   (生成原生代码)                │
        └────────────┬───────────────────┘
                     │
         ┌───────────┴───────────┐
         ▼                       ▼
┌────────────────┐      ┌────────────────┐
│  android/      │      │  ios/          │
│  (Java/Kotlin) │      │  (Obj-C/Swift) │
└────────┬───────┘      └────────┬───────┘
         │                       │
         ▼                       ▼
┌────────────────┐      ┌────────────────┐
│  Gradle Build  │      │  Xcode Build   │
│  ./gradlew     │      │  xcodebuild    │
└────────┬───────┘      └────────┬───────┘
         │                       │
         ▼                       ▼
┌────────────────┐      ┌────────────────┐
│  APK / AAB     │      │  IPA           │
└────────────────┘      └────────────────┘

Troubleshooting

# 问题 1：Metro Bundler 缓存错误
rm -rf node_modules/.cache .expo
npx expo start -c

# Android Gradle 构建失败
## 清理 Gradle 缓存
cd android
./gradlew clean
cd ..

## 重新生成原生代码
npx expo prebuild --clean

# 依赖冲突
rm -rf node_modules pnpm-lock.yaml
pnpm install

## 或使用 Expo 修复工具
npx expo install --fix

# 查看 Android 日志
adb logcat | grep ReactNative
# RN 日志
npx react-native log-android

Expo

development build

# Check Expo Version Compatibility
npx expo install --fix
npx expo prebuild --clean
npx expo run:android

Android emulator
iOS simulator
Expo documentation: Learn fundamentals, or go into advanced topics with our
guides.
Learn Expo tutorial: Follow a step-by-step tutorial where you'll create a project that runs on Android, iOS, and the web.

clean and reinstall dependencies

rm -rf node_modules 
rm -rf .expo
pnpm install
npx expo install <pkg-name>

builds

npx expo build:android
eas build --platform android --profile production --local

ADB

# list devices
adb devices -l
List of devices attached
emulator-5554          device product:sdk_gphone64_x86_64 model:sdk_gphone64_x86_64 device:emu64xa transport_id:2
5EGBB22511208006       device product:KATHY-AN00 model:Hera_BD00 device:TS-KATHY-Q transport_id:1

Page Source

React Native

MAC Develop tools

ENV setup

Running on Device with Expo

Build App

Metro Bundler 做什么？

Prebuild stage

EAS Build 工作流：

Without Expo

签名 APK

Build Optimization

完整构建流程

Troubleshooting

Expo

clean and reinstall dependencies

builds

ADB