使用 umi@3.x 加速 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 扩展配置。
示例工程:UMIRNExample
示例工程:UMIExpoExample
当 RN 工程满足下列条件才会拆包:
- 安装了haul打包器;
- 开启了dynamicImport配置。
示例工程:UMIHaulExample
测试用例:example/e2e/app.spec.js。