WhaleCloudCamp / react-native-dva-quick

这是一个ReactNative开发脚手架

React Native Dva

这是一个ReactNative开发脚手架，基础代码来自@nihgwu的react-native-dva-starter，考虑到后续如果umi兼容RN的话，所以目录结构保持umi风格。

使用这个脚手架，需要用到的最小的知识库dva-knowledgema

用法说明

安装whale-oss-cli

使用whale-oss-cli创建项目

yarn global add whale-oss-cli
npm i whale-oss-cli -g # 或者使用npm，和上面的2选1

whale-oss -v # 0.0.* 能打印版本号，说明安装成功了 

创建项目

使用whale-oss create <appName>,

cd dev  #先确认在你想创建项目的目录

whale-oss create myapp # 安装需要一点时间

注：安装需要一点时间，因为要先创建一个RN项目，再增加dva-code和react-navigation的相关内容，最后要再次安装升级全部的npm模块。

创建页面

当需要新建一个页面时，可以使用whale-oss g rnpage <pageName>

cd <appName> # 确认是在项目的根目录下
whale-oss g rnpage List #比如这里我们创建一个List页面

│ ├── /pages/          # 自动在pages目录下新建
│ │ └── /List/         # List文件夹
│ │   ├── /components/ #私有组件     
│ │   ├── /models/     #私有模型
│ │   │ └── /List/     # List model
│ │   ├── /services/   #私有服务
│ │   │ └── /List/     # List services
│ │   └──  page.js       

注意：这里创建完页面需要手动添加路由和引入model

1.在/src/index.js中添加路由

+ import list from './pages/List/models/List'

const app = dva({
  initialState: {},
-  models: [appModel, other, home],
+  models: [appModel, other, home, list],
  extraReducers: { router: routerReducer },
  onAction: [routerMiddleware],
  onError(e) {
    console.log('onError', e)
  },
})

2.在/src/navigation/AppNavigator.js中加入路由

这个要看具体的�项目路由结构，可以参考/src/navigation/AppNavigator.js和/src/navigation/MainTabNavigator.js中的写法。或者查阅react-navigation官方文档

目录结构

├── /android/          # android原生代码
├── /ios/              # ios原生代码
├── /src/              # 项目源码目录
│ ├── /assets/         # 公共资源文件
│ ├── /components/     # UI组件及UI相关方法
│ ├── /models/         # 全局数据模型
│ ├── /navigation/     # 路由相关的东西
│ ├── /pages/          # 页面
│ │ └── /user/         # 路由
│ │   ├── /components/ #私有组件     
│ │   ├── /models/     #私有模型
│ │   ├── /services/   #私有服务
│ │   └──  page.js       
│ ├── /services/       # 数据接口
│ ├── /themes/         # 项目样式
│ ├── /utils/          # 工具函数
│ │ ├── config.js      # 项目常规配置
│ │ ├── dva.js         # 创建dva的辅助工具
│ │ ├── index.js       # 将utils模块导出
│ │ ├── request.js     # 异步请求函数
│ │ └── storage.js     # storage工具
│ ├── helpers.js       # redux-helpers
│ └──  index.js        # 入口文件
├── .babelrc           # babel配置
├── .eslintrc          # eslint配置
├── app.json           # 项目信息
├── index.js           # rn启动文件
├── package.json       # 模块和脚本信息

LICENSE

MIT