微信号:sufernet

介绍:html+css、javascript、jquery知识分享,web前端开发实例及最新web前端资讯发布.

react-native环境搭建!

2016-04-22 17:18 swimly

    工欲善其事必先利其器,在一睹react-native的绝代风姿后,内心久久不能平静,心中无数次幻想着,如果能掌握如此高逼格的技术,是不是距离升职加薪,当上总经理,出任ceo,赢娶白富美,走上人生巅峰更进一步?想想还有点小激动。二话不说,通过度娘找到官方文档,就准备大干一番。


呃,一定是打开方式不对,为什么刚开始就看得云里雾里的,这都是什么鬼,从来没玩过mac的我表示这完全看不懂。没办法,再怎么看不懂也要装作明白的样子继续看下去。

 $ npm install -g react-native-cli
 $ react-native init AwesomeProject

诶,好像看到曙光了,这一段好眼熟。

于是就照着上面尝试了一下(ps:在这之前你要确保自己已经安装了node)

提示:在安装react-native为全局的时候由于网络原因会很慢,如果你等不及请尝试下面这种办法,依旧打开熟悉的度娘通过github找到react-native这个项目。


稍微了解的都应该知道,我们要选择Facebook的,进去之后我们直接点击download zip下载整个项目,当然你也可以有更高逼格的方式。下载完成后解压然后进入到该目录下,找到react-native-cli点击进去,并且在该目录下打开命令行窗口,输入:npm install -g react-native-cli,这样速度会大大提升。

接下来我们就是利用react-native命令来创建一个实例项目:

同样:在命令行窗口输入:react-native init projectname,当然这个过程也是相当漫长,请大伙耐心等候,完成之后就会有一个项目文件夹,结构如下:


好了,环境配置好了,实例项目也创建好了,接下来就是一睹真容的时刻。这时候如果照着官方文档,直接运行:react-native run-android肯定会一堆报错,这时候我们必须要配置android开发环境并且打开一个android模拟器,供项目运行。

以上配置请自行百度。

以下操作默认配置好android环境和模拟器的启动

如下图:


在项目根目录运行:react-native start

接着运行:react-native run-android,第一次会等待很久,因为要下载依赖包。


当然,默认的并非hello world,总之能看到模拟器中项目能够正常启动即可。如果看到红红的页面,亲确保你在运行react-native start的时候有没有报错,如果start正常一般情况是不会有问题的。

但是这样,我们每次改完代码之后要怎么调试呢,

我们将焦点定在模拟器上,按住ctrl+m,会出现如下界面:


这里将hot reloading 和 live reload都打开,然后返回,下次改完代码,这边会同步更新。

好了,今天的分享就到这里,谢谢大家长此以往的关注!


 
web前端页面开发 更多文章 一、CSS背景background图片 响应式布局该怎么设计?CSS3 Media Query实现响应布局 CSS和javacript实现各种各样的渐变效果背景 JS+CSS海量闪亮导航栏下到你手软 借助jQuery实现的简单CSS Hover效果
猜您喜欢 如何安装VS西红柿插件(Visual Assist) iOS内存管理:从MRC到ARC实践 ✅亲爱的姑娘,没事少折腾自己,行吗? 携程无线新旅程