APP无难事，只怕有心人
今天我们来看看如何快速搭建自己的APP，而且用上流行的数据流解决方案、导航方案。
一、技术栈
如果你对这里的技术栈感到困惑，大可不必担心，跳过这里，直接上手下面的的Demo(例子)，并不影响你搭建这个APP。因为我们会用一个脚手架一次安装，而不是一个一个安装。
当你熟练使用下面的Demo的开发语言和逻辑时，再回过头来，慢慢掌握这里的技术栈，你也许会收获更多。
1. React-Native
跨平台(ios + android)的facebook推的一款用JavaScript 和 React构建APP的框架
React-Native官网
2. Redux
Redux 是一个供JavaScript 应用使用的可预测的状态容器
说白了，就是给你统一存数据的地方，类似的还有搭配Vue使用的Vuex
Redux github文档
3. Redux-Saga
Redux-Saga是一个库，致力于使副作用(side effects)的操作能更好地被管理、高效执行、容易测试、处理错误。 这里的副作用指的是，比如异步获取数据，或者可能会失败的获取浏览器缓存 这类的操作。
4. React-Router
React-Router 是一个声明式的React路由，能方便地进行页面跳转等。
5. React-Navigation
React-Navigation 也是用来做路由的，和React-Router不同的是：
React-Router 可以把Route当作组件，在不同的地方直接定义路由 (动态路由)
React-Navigation 需要提前在一个地方配置好所有的路由 (静态路由)
注意：我们demo用的脚手架，暂时(2019/6/22) 用的是2.x的React-Navigation，如果你想用3.x，需要自己调整（如果你不想修改，请忽略）
6. dva
基于 redux、redux-saga 和 react-router 的轻量级前端框架。
它把这些好用的东西都整合在一起。
官方提到的特性：
- 易学易用，仅有 6 个 api，对 redux 用户尤其友好，配合 umi 使用后更是降低为 0 API
- elm 概念，通过 reducers, effects 和 subscriptions 组织 model
- 插件机制，比如 dva-loading 可以自动处理 loading 状态，不用一遍遍地写 showLoading 和 hideLoading
- 支持 HMR，基于 babel-plugin-dva-hmr 实现 components、routes 和 models 的 HMR
具体见 dva github文档
你也可以看看这里的 dva入门课
7. react-native-dva-starter
是一个基于dva和react-navigation的React Native启动器
具体见 react-native-dva-starter github文档
二、Demo
现在我们使用dva-native-cli这个脚手架，简单高效地创建一个app
1. 安装脚手架
yarn global add dva-native-cli // yarn全局安装脚手架
或者 npm install dva-native-cli -g // npm全局安装脚手架
2. 新建项目
// 使用脚手架的dvanative git命令创建一个名字叫demo的app
// (你可以把demo修改成其他的app名字)
dvanative git demo
3. 进入项目目录
cd demo // 我这里的项目目录是demo
如果你对怎么在手机上启动React-Native项目不了解，或者还没有React-Native的开发环境，请先按照这里的教程一步一步搭建：React-Native环境搭建
搭建完之后，连接真机 或者 打开模拟器，之后运行下面的启动命令：
react-native run-ios // 启动ios
或者 react-native run-android // 启动android
这里会打开一个react-native packager命令行窗口，不要关闭这个命令行窗口
在原来的命令行窗口中，
- 正确提示如下
react-native run-ios:
ios正确提示
react-native run-android:
android正确提示
图片中，emulator-5554是安卓模拟器的名字
三. 常见错误提示
- React-Native环境搭建不正确 或 没有正确连接机器:
错误提示
如果你遇到上面的报错，很可能你没有搭建好React-Native的开发环境，或者没有连接真机或模拟器，请关闭所有的命令行窗口，再次检查自己的环境是否符合React-Native环境搭建的内容，再执行此步骤。
- 没有配置命令行工具路径
image.png
如果你遇到上面的报错，如图，打开：
Xcode > Preferences > Locations
配置命令行工具
很可能这里没有选中任何工具，随便选中一个下拉选项，再次运行命令即可。
四. 效果图
恭喜你，你的app搭建完成，里面内置了一些页面，效果如下：
效果图
现在你可以开发一些页面，或者对照项目中原有的代码，深入了解一下上面提到的技术栈。祝你学习愉快！
（完）
网友评论