UMIHaulExample

umi-react-native示例工程。

当前 master 分支最新代码集成了：

• DvaJS
• @ant-design/react-native
• react-navigation

需要配置好 RN 开发环境：Setting up the development environment，才能查看应用运行效果。

你可以使用UMIHaulExample作为模板，快速开始业务开发；

也可以从零开始徒手搭建，在变更记录中追溯每一步代码变动的内容。

目录

• 快速开始
  • 开发
  • 发布
    • 仅输出 JS Bundle
      • Android
      • iOS
    • 构建 iOS ipa
    • 构建 Android apk
• 拆包
  • 拆包策略
  • 将拆包加入原生 App 构建流程
    • Android
    • iOS
• 变更记录
  • 0.0.1-初始工程
  • 0.0.2-安装 haul
  • 0.1.0-安装 umi 和 umi-preset-react-native
  • 1.0.0-集成 DvaJS
  • 1.1.0-集成 @ant-design/react-native
  • 1.2.0-集成 react-navigation
  • 1.3.0-拆分多 bundle

快速开始

开发

clone 到本地后，进到工程根目录，使用 yarn 安装依赖：

yarn

进到 ios 工程目录使用 pod 安装原生依赖（Android 跳过这一步）：

cd ios && pod install && cd -

启动 watch 进程，监听文件变动，重新生成中间代码：

yarn watch

再另启一个终端，启动 Android 应用：

yarn android

或者启动 iOS 应用：

yarn ios

发布

仅输出 JS Bundle

执行下面命令，会输出 js bundle 到 /dist/ios和/dist/android目录。

yarn bundle

之后可以提供给原生开发的同学。

Android

将/dist/android目录下所有文件和目录拷贝到下图的assets目录中：

iOS

将/dist/ios目录下所有文件和目录直接拖拽到 Xcode 中即可：

Xcode 会自动把这些文件和目录添加到右侧的Copy Bundle Resources中。

构建 iOS ipa

执行下面命令，会使用xcodebuild命令行工具构建可供真机安装实测的 App:

yarn release:ios

输出路径：ios/build/UMIHaulExample.ipa。

构建 Android apk

执行下面命令，会使用gradle命令行工具构建可供真机安装实测的 App：

yarn release:android

输出路径：android/app/build/outputs/apk/release/app-release.apk。

拆包

在开发阶段使用React Native CLI，不拆包，因为：

1. haul不支持：Fast Refresh, Live Reloading, Hot Replacement...
2. umi-react-native-multibundle目前还不支持从远程 URL 下载 JS Bundle...

在发布阶段使用haul进行拆包。

拆包策略

• 主包包含：
  • umi 生成的临时文件；
  • 依赖项：
    • react-router
    • history
    • react
    • react-native
    • react-router-native
    • umi-react-native-multibundle
    • dva
    • @react-native-community/masked-view
    • react-native-gesture-handler
    • react-native-reanimated
    • react-native-safe-area-context
    • react-native-screens
    • umi-renderer-react-navigation
    • umi

• 分包：pages 目录下每个页面都单独拆为一个分包，路由访问到时按需加载。

将拆包加入原生 App 构建流程

按照如下描述追加相关配置后，在构建正式的 iOS/Android 安装包时，会使用 haul 拆包：

Android

按照下图，在build.gradle文件中添加bundleCommand配置：

cliPath: 由 haul 添加。

iOS

在 Xcode Build Phases 选项卡中找到截图所示位置，添加BUNDLE_COMMAND环境变量：

CLI_PATH: 由 haul 添加。

变更记录

0.0.1-初始工程

使用react-native init得到初始代码：0.0.1

npx react-native init UMIHaulExample

0.0.2-安装 haul

代码：0.0.2 。

yarn add @haul-bundler/cli --dev && yarn haul init

查看变更内容：

• compare/0.0.1...0.0.2

0.1.0-安装 umi 和 umi-preset-react-native

代码：0.1.0 。

yarn add umi umi-preset-react-native --dev

查看变更内容：

• compare/0.0.2...0.1.0

1.0.0-集成 DvaJS

代码：1.0.0。

yarn add @umijs/plugin-dva --dev

查看变动内容：

• compare/0.1.0...1.0.0

1.1.0-集成 @ant-design/react-native

代码：1.1.0。

yarn add @ant-design/react-native && yarn add umi-plugin-antd-react-native --dev && yarn react-native link

查看变动内容：

• compare/1.0.0...1.1.0

1.2.0-集成 react-navigation

代码：1.2.0。

yarn add umi-preset-react-navigation --dev && yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view && cd ios && pod install && cd -

查看变动内容：

• compare/1.1.0...1.2.0

1.3.0-拆分多 bundle

代码：1.3.0。

yarn add umi-react-native-multibundle && cd ios && pod install && cd -

查看变动内容：

• compare/1.2.0...1.3.0