React Native入门教程 1 -- 开发环境搭建

有人问我为啥好久不更新博客。。我只能说在学校宿舍真的没有学习的环境。。基本上在宿舍里面很颓废。。不过要毕业找工做了，我要渐渐把这个心态调整过来，就从react-native第一篇博客开始。话说RN也出来好久了 每次我研究都比别人晚一步
不过不要紧，意识到了就不算晚。环境搭建了几个小时，中间很正常的遇到了一些错误，因而记录下来过程和问题的解决方法，分享给你们。

转载请注明出处：http://blog.csdn.net/wingichoy/article/details/51791076

为何要研究React Native

由于总感受之后移动端不多有人作APP，一作就是两种平台的，成本过高。早晚药丸。 因此居安思危，早点研究跨平台的东西，因为是js写的，之后APP死了还能轻易转前端，何乐而不为呢。

啥叫React Native

这个东东是FaceBook研发的， 他的主要功能就是用js来编写各个平台的APP，他们的主旨是：

仅需学习一次，编写任何平台。(Learn once, write anywhere)

看起来很诱惑，是否是，快来跟我一块儿学习如何搭建环境。这里给出的是windows下的Android版本，其余系统平台应该大同小异，就再也不介绍。

工欲善其事必先利其器

再安装开发环境以前，介绍一款取代win下cmd.exe利器：Cmder。
他为windows提供了模拟Linux命令的环境，怎么说呢，就俩字，很爽！

点击这里下载Cmder

准备环境

前提你须要有一个搭建好的Android Studio环境，这里想必就不用多说了。

须要安装的有：

1. python 2(不能够是3)
2. Node.js
3. react-native-cli(用于RN项目的建立，初始化，更新等)

python&node

首先去官网下载python2 以及 Node.js:

安装以后 ，在cmder里测试是否安装正确：

键入python 以及 node

若是正常 则以下图：

react-native-cli

在命令行键入

npm install -g react-native-cli

安装react-native-cli。

环境变量（很重要）

除了java的环境变量外，还要添加android的环境变量：
ANDROID_HOME 以及C:\Users\Administrator\AppData\Local\Android\sdk

初始化项目

以上环境安装完毕以后，就能够初始化项目了。

在cmder键入

react-native init MyProjct

来初始化项目

这里会从网上啦一些文件下来，须要耐心等待。。

初始化完毕以后，键入如下命令来开启服务器。

cd MyProject
react-native start

如图，正常开启服务器的界面。

接下来，键入命令，让项目跑起来

react-native run-android

漂亮！ 咱们第一个RN程序已经跑起来了。固然，若是顺利的话，你会看到以上界面。。可是过程当中每每不那么顺利。

遇到的错误总结

1. 在run-android 报错

(1)no connected devices

这里是没有找到你的设备，只须要用adb链接如下就能够了

adb connect 127.0.0.1:62001(输入你本身模拟器的端口)

(2)
FAILURE: Build failed with an exception.
* What went wrong:
A problem occurred configuring project ‘:app’.
failed to find Build Tools revision 23.0.1
这个是说 找不到Build Tools 23.0.1 因此咱们打开Android Studio的SDK Manager ，找到以下图的下载便可

2.在run-android的时候下载gradle很慢

这个是比较通用的问题。。。 看他下载的版本，咱们用迅雷去官网下一个，放到C:\Users\Administrator.gradle\wrapper\dists文件夹下，便可。

3.运行APP之后红屏

报错java.lang.RuntimeException:Could not connect to development server.如图

那么按照上面的提示，进行以下处理：
一、确保你的packager 服务器在运行。即，键入了以下命令

react-native start

二、确保你的设备链接到了电脑。

adb connect host:prot

三、尝试以下命令

adb reverse tcp:8081 tcp:8081

四、在开发选项里设置调试IP，注意是开发选项，并非手机的开发者选项（害我找了半个小时）。。 此时应该，点击菜单键，其中有个Dev Setting 设置主机IP和端口便可解决。

到此，咱们踏出了第一步。将来正向咱们招手，加油。
参考文章：开始使用React Native

若是你喜欢个人博客，欢迎评论和关注！谢谢 欢迎加入React Native讨论群 ： 120663591

下一篇：React Native入门教程(笔记) 2 – 基本组件使用及样式（