Skip to Content
Nextra 4.0 is released 🎉
应用开发app

技术栈概览

  • 基础
    • React 18.3.1
    • React Native 0.77.1
    • TypeScript 5.0.4
    • Yarn 4.6.0（Berry/Plug’n’Play）
  • Expo（Bare 集成）
    • expo@52、expo-file-system、expo-image、expo-intent-launcher、expo-linear-gradient
  • 导航
    • @react-navigation/native、@react-navigation/native-stack、@react-navigation/bottom-tabs
    • react-native-screens、react-native-safe-area-context
  • 动画与手势
    • react-native-reanimated@^3.17.0
    • react-native-gesture-handler
    • @gorhom/bottom-sheet@^5
    • react-native-reanimated-carousel
  • UI 与图表
    • react-native-paper
    • @shopify/react-native-skia
    • @wuba/react-native-echarts + echarts
    • react-native-svg + react-native-svg-transformer
    • @shopify/flash-list
    • @marceloterreiro/flash-calendar、react-native-calendars
    • @shopify/restyle、nativewind + tailwindcss
  • 表单
    • react-hook-form、rc-field-form
  • 数据与状态
    • axios、dayjs、lodash-es
    • zustand
  • 设备与原生能力
    • react-native-vision-camera
    • react-native-mmkv（高性能 KV 存储）
    • react-native-device-info
    • react-native-fs
    • react-native-vector-icons
    • react-native-pager-view
    • react-native-sse
    • @react-native-community/netinfo、@react-native-community/slider
  • 工程与质量
    • ESLint、Prettier（含 prettier-plugin-tailwindcss）
    • Jest、React Test Renderer
    • Babel（@react-native/babel-preset、babel-plugin-module-resolver、移除 console 插件）
    • Metro 配置（@react-native/metro-config）
    • Reactotron 调试（含 MMKV 插件）

npm Scripts

  • yarn start：启动 Metro（加载 .env.devlopment）
  • yarn android：Android 开发构建并安装（加载 .env.devlopment）
  • yarn android:release：Android Release 打包（ENVFILE=.env.production）
  • yarn ios：iOS 开发（iPhone 15 Pro 模拟器，使用 scheme Myapp(devlopment)）
  • yarn ios-prod：iOS 生产 scheme（Myapp(production)）
  • yarn test：运行 Jest
  • yarn mumu：连接 MuMu 模拟器并运行 Android

环境准备

  • Node.js：≥ 18（建议 18 LTS 或 20 LTS）
  • Yarn 4：使用 Corepack 管理
corepack enable
corepack prepare yarn@4.6.0 --activate
  • Android（Windows/macOS/Linux）
    • Android Studio（含 SDK，建议安装对应 RN 的构建工具）
    • JDK 17（设置 JAVA_HOME）
    • 环境变量：ANDROID_HOME 指向 Android SDK 根目录
  • iOS（仅 macOS）
    • Xcode（与 iOS SDK）
    • CocoaPods
sudo gem install cocoapods

拉取与安装依赖

# 克隆后在项目根目录
yarn install

如果 IDE 在 Yarn PnP 下提示类型或模块解析问题，可生成 SDK：

yarn dlx @yarnpkg/sdks vscode

环境变量

项目使用 react-native-config + ENVFILE 切换环境：

  • 开发：.env.devlopment（注意与 development 拼写不同）
  • 生产：.env.production

示例：

# .env.devlopment
API_BASE_URL=https://dev.api.example.com
APP_ENV=development
 
# .env.production
API_BASE_URL=https://api.example.com
APP_ENV=production

键名以代码中对环境变量的读取为准（如 src/services/config.ts 等）。

运行

Android（Windows 可用）

yarn start
yarn android

使用 MuMu 模拟器：

yarn mumu

iOS（macOS）

cd ios && pod install && cd ..
yarn ios

构建发布

Android Release

cd android
ENVFILE=.env.production ./gradlew assembleRelease
# 输出：android/app/build/outputs/apk/release/

iOS Release

  • 在 Xcode 选择 scheme：Myapp(production)
  • Product → Archive → 导出 IPA

关键配置检查清单

  • Babel Reanimated 插件
    • 在 babel.config.js 中确保包含 react-native-reanimated，并置于插件数组末尾
  • SVG 支持
    • 已安装 react-native-svg-transformer
    • 在 metro.config.js 配置 transformer 与 resolver.sourceExts/assetExts 以支持 .svg 作为模块
  • 相机权限
    • react-native-vision-camera 需在 Android AndroidManifest.xml 与 iOS Info.plist 中添加相机/麦克风权限
  • 存储/性能
    • react-native-mmkv 原生自动链接正常（Android 与 iOS）
  • 工具链版本
    • Android 使用 JDK 17
    • iOS pod install 能成功完成
  • 质量保障
    • yarn lint / yarn test 可通过

常见问题与排查

  • Metro 缓存问题：
yarn start --reset-cache

  • Android 构建失败（JDK 不匹配）：

    • 确保 JAVA_HOME 指向 JDK 17

  • iOS 构建失败（Pods 问题）：

cd ios
rm -rf Pods Podfile.lock
pod install
cd ..

  • Reanimated 报错：

    • 检查 babel.config.js 插件是否存在且位置正确
    • 重启 Metro 与应用

  • SVG 无法导入：

    • 检查 metro.config.js 的 svg transformer 配置是否生效

参考运行顺序（Windows + Android）

corepack enable
corepack prepare yarn@4.6.0 --activate
yarn install
 
# 创建环境文件
# .env.devlopment / .env.production
 
# 启动 Metro
yarn start
 
# 新开终端运行 Android
yarn android
# 或使用 MuMu
yarn mumu
最近更新：12/9/2025, 2:17:53 AM
小程序网页