如何快速搭建一个React-Native的APP

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)的操作能更好地被管理、高效执行、容易测试、处理错误。 这里的副作用指的是，比如异步获取数据，或者可能会失败的获取浏览器缓存 这类的操作。

具体见Redux-Saga github文档

4. React-Router

React-Router 是一个声明式的React路由，能方便地进行页面跳转等。

具体见React-Router github文档

5. React-Navigation

React-Navigation 也是用来做路由的，和React-Router不同的是：
React-Router 可以把Route当作组件，在不同的地方直接定义路由 (动态路由)
React-Navigation 需要提前在一个地方配置好所有的路由 (静态路由)

这里有 React-Navigation 2.x中文文档

注意：我们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搭建完成，里面内置了一些页面，效果如下：

效果图

现在你可以开发一些页面，或者对照项目中原有的代码，深入了解一下上面提到的技术栈。祝你学习愉快！

（完）