UMIExpoExample

umi-react-native示例工程。

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

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

需要了解如何使用expo开发 RN 应用。

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

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

目录

• 快速开始
• 变更记录
  • 0.0.1-初始工程
  • 0.1.0-安装 umi 和 umi-preset-react-native
  • 1.0.0-集成 DvaJS
  • 1.1.0-集成 @ant-design/react-native
  • 1.2.0-集成 react-navigation

快速开始

全局安装 expo-cli:

yarn global add expo-cli

将 UMIExpoExample clone 到本地后，进到工程根目录安装依赖：

yarn

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

yarn watch

另启一个终端，启动 expo：

yarn start

变更记录

0.0.1-初始工程

使用expo init得到初始代码：0.0.1

UMIExpoExample 在创建时，使用的是第一个模板：

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

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

修改 package.json 文件：

{
-  "main": "node_modules/expo/AppEntry.js",
+  "main": "index",
  "scripts": {
+   "watch": "umi g rn --dev",
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  }
}

代码：0.1.0 。

查看变更内容：

• compare/0.0.1...0.1.0

1.0.0-集成 DvaJS

yarn add @umijs/plugin-dva --dev

代码：1.0.0。

查看变动内容：

• compare/0.1.0...1.0.0

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

需要使用 expo 安装 expo-font和@ant-design/react-native：

expo install expo-font @ant-design/react-native && yarn add umi-plugin-antd-react-native --dev

expo-font用来加载@ant-design/react-native的字体图标。

代码：1.1.0。

查看变动内容：

• compare/1.0.0...1.1.0

1.2.0-集成 react-navigation

需要使用 expo 安装所有 react-navigation 的依赖：

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

代码：1.2.0。

查看变动内容：

• compare/1.1.0...1.2.0