博客首页ReactNative分类

ReactNative从入门到实战二:开发运行

发布时间:2017-10-24 14:2:20编辑:Mr.Co阅读(123)

ReactNative

上一篇《ReactNative从入门到实战一:环境安装》文章中记录了如何搭建环境,那么这篇文章记录下如何在虚拟机上运行程序并且调试等.

首先确认下自己电脑中的RN是否安装成功

通过以下命令来验证下

react-native -v

如果出现了版本号,那么证明你是安装成功了,那么我们可以进行下一步,就是构建一个RN项目

首先我们进入一个工作目录中,然后通过下面的命令进行构建

react-native init ProjectName

ProjectName这个是你自定义的项目名称,这个构建可能需要几分钟的时间,要耐心等待.


当构建完成后,我们进入项目目录中

目录中有android、ios两个文件夹,这两个文件夹是原生APP的底层代码,我们目前不需要去改动它。

除了那两个文件夹以外,还有node_modules目录,这个就不用介绍了。

我们目前可以关心的是index.android.js跟index.ios.js。

高版本的RN构建出来的可能不是这两个js,可能是一个app.js。

这个跟RN的版本有关。

我们打开index.ios.js后你会发现这个就是JSX语法,跟React没有什么不同。

所有程序都就绪后,我们可以运行这个APP看看效果。

进入项目目录,然后运行下面命令即可运行

react-native run-ios

运行已经成功后,如果我们想要Debug调试、热更新之类的功能那也很简单

使用Command+D快捷键调出如下窗口

Debug Js Remotely选项就是调试功能,但是它不能断点调试,它会打开一个浏览器窗口,通过控制台的方式返回调试信息

Enable Hot Reloading选项是热更新功能,代码有更改APP就会自动重新加载

我们目前就是这两个功能用的比较多.

哦,对了,除了Debug Js Remotely这种方式查看调试信息以外,还有一种通过Shell命令来查看的,那就是react-native log-ios这个会在命令行里面记录日志.也是一种方式

至此,我们就已经完美运行并且可以调试了。


转载请注明出自:http://www.mrco.cn/article/59eed76cd33deffa4b532588.html

最新评论(0)

    我要评论

    *
    *
    *
    *
    *
    验证码