umi-react-native

使用 [email protected] 加速 react-native 开发效率：

• 零配置，添加DvaJS，@ant-design/react-native... 等依赖后开箱即用；
• 只需要专注页面 UI 和业务领域模型的实现，所有编译配置，框架运行所需 HOC 和 Context Provider 全部由 umi 搞定；
• 路由方案默认使用 umi 内置的react-router，可选react-navigation；
• 启用dynamicImport配置后，支持拆包，运行时从本地按需加载 JS bundle 文件。了解详情：使用 haul 拆包

NPM 包	当前版本	简介
umi-plugin-antd-react-native		为@ant-design/react-native提供按需加载，主题定制、预设、切换，国际化支持，在expo中链接字体图标。
umi-preset-react-native		基础包，让umi具备开发 RN 的能力。需要 react-native 0.44.0 及以上版本（>=0.44.0）
umi-preset-react-navigation		使用react-navigation替换react-router开发地道的原生应用。需要 react-native 0.60.0 及以上版本（>=0.60.0）
umi-renderer-react-navigation		支持以react-navigation的方式来渲染react-router所定义的路由模型。无须单独安装该依赖
umi-react-native-multibundle		RN Bridge API，为 JS 层提供按需加载 Bundle 文件的能力。需要 react-native 0.62.2 及以上版本（>=0.62.2）

快速开始

umi 在 RN 中仅用来生成中间代码（临时文件），介于编码和构建的之间，旨在引入 umi 的开发姿势来提升 RN 编程体验。

下游可以使用：

• React Native CLI：RN 官方开发/打包工具；
• expo：不需要搭建 iOS 和 Android 开发环境，工程目录干净清爽，添加 RN 依赖方便快捷；
• haul：第三方 RN 打包器，使用 webpack。缺点是不支持：Fast Refresh、Live Reloading、Hot Replacement。

umi-preset-react-native会探测用户工程内的依赖，自动为这些工具生成所需的配置文件和入口文件。

通常你只需要选择其中一款，如果全都要请查看：umi-preset-react-native 扩展配置。

使用 React Native CLI

示例工程：UMIRNExample

使用 expo

示例工程：UMIExpoExample

使用 haul 拆包

当 RN 工程满足下列条件才会拆包：

• 安装了haul打包器；
• 开启了dynamicImport配置。

示例工程：UMIHaulExample

文档

• 发布日志
• 命令行工具
• 配置
• 路由
• FAQ
  • hmrClient.send is not a function
  • 使用 @ant-design/react-native 组件时，报错：Unrecognized font family 'antoutline'
  • Unable to Resolve Module in React Native App
  • Attempted to assign to readonly property

案例

• 单独为某个页面设置导航条
• 持久化导航状态（App 复苏后状态恢复）
• 自定义页面转场动画

测试

端到端测试

测试用例：example/e2e/app.spec.js。