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

有人问我为啥很久不更新博客。。我只能说在学校宿舍真的没有学习的环境。。基本上在宿舍里面很颓废。。不过要毕业找工作了,我要渐渐把这个心态调整过来,就从react-native第一篇博客开始。话说RN也出来很久了 每次我研究都比别人晚一步React Native入门教程 1 -- 开发环境搭建

不过没关系,意识到了就不算晚。环境搭建了几个小时,中间很正常的遇到了一些错误,于是记录下来过程和问题的解决方法,分享给大家。

转载请注明出处: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命令的环境,怎么说呢,就俩字,很爽!

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

点击这里下载Cmder

准备环境

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

需要安装的有:

  1. python 2(不可以是3)
  2. Node.js
  3. react-native-cli(用于RN项目的创建,初始化,更新等)

python&node

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

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

安装之后 ,在cmder里测试是否安装正确:

键入python 以及 node

如果正常 则如下图:

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

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

来初始化项目

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

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

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

cd MyProject
react-native start

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

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

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

react-native run-android

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

漂亮! 我们第一个RN程序已经跑起来了。当然,如果顺利的话,你会看到以上界面。。但是过程中往往不那么顺利。

遇到的错误总结

1. 在run-android 报错

(1)no connected devices

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

这里是没有找到你的设备,只需要用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 ,找到如下图的下载即可

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

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

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

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

3.运行APP以后红屏

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

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

那么按照上面的提示,进行如下处理:

1、确保你的packager 服务器在运行。即,键入了如下命令

react-native start 

2、确保你的设备连接到了电脑。

adb connect host:prot

3、尝试如下命令

adb reverse tcp:8081 tcp:8081

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

到此,我们踏出了第一步。未来正向我们招手,加油。

参考文章:开始使用React Native

如果你喜欢我的博客,欢迎评论和关注!谢谢 欢迎加入React Native讨论群 : 120663591

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

上一篇:不用jquery等框架实现ajax无刷新登录


下一篇:jQuery Ajax无刷新操作一般处理程序 ashx