Skip to content

xuyuanxiang/UMIRNExample

Repository files navigation

UMIRNExample

umi-react-native示例工程。

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

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

你可以使用UMIRNExample作为模板,快速开始业务开发;

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

目录

快速开始

从 github clone 到本地后,使用 yarn 安装依赖:

yarn

链接@ant-design/react-native字体(图标)资源文件:

yarn react-native link

对于iOS还需要进到 ios 工程目录使用 pod 安装原生依赖(Android 跳过这一步):

cd ios && pod install && cd -

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

yarn watch

另启一个终端,启动 Android 应用:

yarn android

或者,启动 iOS 应用:

yarn ios

变更记录

0.0.1-初始工程

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

npx react-native init UMIRNExample

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

代码:0.1.0

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

package.json:

{
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
+   "watch": "umi g rn --dev",
    "test": "jest",
    "lint": "eslint ."
  }
}

查看变更内容:

1.0.0-集成 DvaJS

代码:1.0.0

yarn add @umijs/plugin-dva --dev

查看变动内容:

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

查看变动内容:

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 -

查看变动内容:

构建离线包

先使用 umi 生成中间代码:

umi g rn

再使用react-native bundle构建离线包(offline bundle)。