历史节点
- 2012年9月11日, 马克·扎克伯格(Mark Zuckerberg)--Facebook最大的错误就是在HTML5上下注太多
- 2013年5月30日，Facebook公司对外正式发布 ReactJS
- 2015年3月26日，Facebook公司对外正式发布 React Native -- 使用React框架跨平台开发原生 IOS 移动应用。
- 2015年9月15日，React Native 支持开发原生 Android 移动应用。
词汇表
- React -- 一个JavaScript框架，用于构建“可预期的”和“声明式的”Web用户界面，它已经使Facebook更快地开发Web应用。
- Native -- 意指原生, React Native 使用 React 来开发Native(原生)的APP。
安装开发环境(Windows 10 & Android)
说明
为了能够保证一次就顺利安装完成，请严格按照文档顺序来操作。
参考网址：
react native中文网
react native on github.io
安装python、nodejs、git、HAXM和Java-1.8
还没开始学就遇到第一个坑，国内网络封堵的厉害，官网上建议用的Chocolatey包管理器来安装Python、NodeJS和Java遇到各种超时和报错。因此需要自己分别到 Python官网、 NodeJS官网、
Git-SCM、
intel HAXM和
Java官网去下载和安装。
备注：目前只支持Python2.7；详细的HAXM安装说明请点击这里。
设置环境变量
打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 -> 用户变量 -> Path -> 编辑
- Python
C:\Python27 - NodeJS
C:\Program Files\nodejs - Git-SCM
C:\Program Files (x86)\Git\bin - Java
C:\Program Files\Java\jdk1.8.0_111
验证安装结果
Python
C:\Users\zhengtong>python
Python 2.7.13 (v2.7.13:a06454b1afa1, Dec 17 2016, 20:53:40) [MSC v.1500 64 bit (AMD64)] on win32
Type "help", "copyright", "credits" or "license" for more information.
>>> # 敲入Ctrl + C组合键 或 quit() 退出。
Nodejs
C:\Users\zhengtong>node
> # 敲入Ctrl + C组合键 退出。
Git
C:\Users\zhengtong>git version
git version 2.7.2.windows.1
HAXM
C:\Users\zhengtong> sc query intelhaxm
SERVICE_NAME: intelhaxm
TYPE : 1 KERNEL_DRIVER
STATE : 4 RUNNING # 确保状态是 running
(STOPPABLE, NOT_PAUSABLE, IGNORES_SHUTDOWN)
WIN32_EXIT_CODE : 0 (0x0)
SERVICE_EXIT_CODE : 0 (0x0)
CHECKPOINT : 0x0
WAIT_HINT : 0x0
Java
C:\Users\zhengtong>java -version
java version "1.8.0_111"
Java(TM) SE Runtime Environment (build 1.8.0_111-b14)
Java HotSpot(TM) 64-Bit Server VM (build 25.111-b14, mixed mode)
上面这五个软件的验证都没有任何报错, 且正常显示出对应信息则表示软件已经安装成功，而且环境变量已经设置正确。
安装React Native命令行工具(The React Native CLI)
用npm来安装react native cli还是网络封堵问题，因此需要将原镜像仓库地址指向到淘宝提供的镜像仓库。
打开cmd命令行窗口
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
执行react native cli安装命令
npm install -g yarn react-native-cli
安装Android Studio开发工具(IDE)
下载地址： Android Studio IDE
注意： 整个Android Studio安装过程被拆分成三部分，第一部分是exe文件解压(也就是我双击android-studio-bundle-145.3537739-windows.exe这个安装包)。
第二部分：解压好了之后开始进入向导(该向导仍然会再安装一些东西)，在向导的Install Type界面(选择Custom)，
然后再SDK Components Steup界面(全部勾选)，这时会到google上去下载一些组建，漫长的等待。
第三部分：向导完成之后，会弹出一个 welcome to android studio界面,
选择该窗口右下脚的 <configure> -> <SDK Manager>，分别勾选:
- 点击右下角的Show pakage details.
- 勾选 Google APIs
- 勾选 Intel x86 Atom System Image
- 勾选 Intel x86 Atom_64 System Image
- Google APIs Intel x86 Atom_64 System Image
注意：这里必须勾选 Android 6.0(Marshmallow)
切换到SDK Tools分页
- 点击右下角Show pakage details.
- 在Android SDK Build Tools中勾选Android SDK Build-Tools 23.0.1。（必须是这个版本）
接着又是漫长的等待。
设置用户环境变量
确保ANDROID_HOME环境变量正确地指向了你安装的Android SDK的路径。
打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 -> 用户变量 -> 新建
将Android SDK的Tools目录添加到PATH变量中
打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 -> 用户变量 -> Path -> 编辑
- 增加tools, 下面这个是我自己操作系统的路径.
C:\Users\zhengtong\AppData\Local\Android\sdk\tools - 增加plateform-tools, 下面这个是我自己操作系统的路径.
C:\Users\zhengtong\AppData\Local\Android\sdk\platform-tools
验证安装
- 启动手机模拟器.
1.1 打开虚拟设备管理界面C:\Users\zhengtong>android avd虚拟设备管理界面
1.2 创建一个手机模拟器
创建手机模拟器
1.3 点击start
启动手机模拟器
1.4 显示安卓系统则表示正常
启动手机模拟器
- 启动项目.
显示如下图片则表示整个安装过程已经顺利结束。react-native init AwesomeProject cd AwesomeProject react-native start react-native run-android
项目已顺利启动
安装过程报错记录
-
Cannot read property 'message' of undefined
控制台报错信息
C:\Users\zhengtong\AwesomeProject>react-native run-android JS server already running. Running C:\Users\zhengtong\AppData\Local\Android\sdk/platform-tools/adb -s fce7e07a reverse tcp:8081 tcp:8081 Building and installing the app on the device (cd android && gradlew.bat installDebug)... FAILURE: Build failed with an exception. What went wrong: A problem occurred configuring project ':app'. failed to find Build Tools revision 23.0.1 Try: Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. BUILD FAILED解决办法(更新 android sdk platform-tools revision 23.0.1)：
Android\sdk\tools > android list sdk -a
Show lists of sdk
Find tools line and type the following entry in the line number.
12 - Android SDK Platform-tools, revision 23.0.1 and update
Android\sdk\tools > android update sdk -a -u -t 12 -
No connected devices!
控制台报错信息C:\Users\zhengtong\AwesomeProject>react-native run-android ... ... :app:installDebug FAILED FAILURE: Build failed with an exception. * What went wrong: Execution failed for task ':app:installDebug'. > com.android.builder.testing.api.DeviceException: No connected devices!github上大致的描述是说, 要启动安卓项目, 首先需要配置好虚拟设备(例如：Nexus 4、Samsung Galaxy 4等)。
调用如下命令可以启动虚拟设备管理窗口，先添加或clone一个已经配置好的虚拟设备模版。C:\Users\zhengtong\AwesomeProject>android avd然而我添加好了之后，启动虚拟设备, 又报一个<emulator: ERROR: x86_64 emulation currently requires hardware acceleration!> ， stackoverflow上说是因为没有安装硬件虚拟化加速驱动。在这里下载，然后安装就可以了。
