如何快速搭建一个React-Native的APP-CFANZ编程社区

APP无难事，只怕有心人
今天我们来看看如何快速搭建自己的APP，而且用上流行的数据流解决方案、导航方案。

一、技术栈

如果你对这里的技术栈感到困惑，大可不必担心，跳过这里，直接上手下面的的Demo(例子)，并不影响你搭建这个APP。因为我们会用一个脚手架一次安装，而不是一个一个安装。
当你熟练使用下面的Demo的开发语言和逻辑时，再回过头来，慢慢掌握这里的技术栈，你也许会收获更多。

1. React-Native

2. Redux

注意：我们demo用的脚手架，暂时(2019/6/22) 用的是2.x的React-Navigation，如果你想用3.x，需要自己调整（如果你不想修改，请忽略）

6. dva

官方提到的特性：

易学易用，仅有 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

二、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:

react-native run-android:

图片中，emulator-5554是安卓模拟器的名字

三. 常见错误提示

React-Native环境搭建不正确或没有正确连接机器:

如果你遇到上面的报错，很可能你没有搭建好React-Native的开发环境，或者没有连接真机或模拟器，请关闭所有的命令行窗口，再次检查自己的环境是否符合React-Native环境搭建的内容，再执行此步骤。

没有配置命令行工具路径

如果你遇到上面的报错，如图，打开：
Xcode > Preferences > Locations

很可能这里没有选中任何工具，随便选中一个下拉选项，再次运行命令即可。

四. 效果图

恭喜你，你的app搭建完成，里面内置了一些页面，效果如下：

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

（完）

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