【稀饭】react native 实战系列教程之项目初始化

原创 2016年08月26日 10:56:09

项目前期准备工作

本系列课程实战,默认是你已经安装好react native所需的一切环境配置,如果你还没配置好,请事先看下中文官网

这里提一下,如果你在安装Chocolatey过程中出错了,一般是权限问题,你需要以管理员的身份来启动cmd命令行,然后再执行安装即可。

本系列课程的开发环境:

  • 系统:win10
  • IDE:webstorm、sublime text 3、android studio
  • 调试机:genymotion安卓模拟器、小米5
  • React Native 0.31

后期做IOS适配的时候,会切换到mac系统环境。

创建项目

在F盘下创建一个目录,来存放项目代码,比如F:\Gray\ReactNative

然后打开命令行cd到这个路径的根路径下,执行命令

react-native init XiFan

XiFan 是项目名称,这个过程创建的时间比较长,要耐心等待。

在等待创建的过程,我们可以先把模拟器打开准备好,然后等命令成功执行完之后,cd到项目XiFan目录下,执行命令

react-native run-android

启动命令

前提是需要电脑连接Android模拟器或者真机,可以调试。一开始运行可能不能正常运行,你需要配置下IP。

如果你是使用模拟器,那么可以使用Ctrl+M打开配置菜单,如果是真机可以按菜单键调出

配置菜单

这里说明几个有用到的选项

  • Reload: 当你代码做出了修改并保存以后,可以直接Reload一下,应用就更新到最新代码的状态了。但是如果你项目新建了文件夹,添加了资源图片,可能reload就没效果了,此时要重新执行react-native run-android命令。
  • Debug JS Remotely:这个选项会打开浏览器,可以进行js代码调试
  • Dev Settings:用于开发环境的配置

这里我们要打开Dev Settings选项

Dev Settings

选择下面的 Debug server host & port for device

Debug server host & port for device

填入你电脑的IP和端口号8081,需要注意的是,调试机和电脑必须在同一个局域网内,简单点就是,调试机和电脑链接同一个WiFi即可。

配置好后,在执行react-native run-android命令,就可以看到应用可以正常运行和显示了。

总结

到这里,项目的初始化任务就算完成了,本节只是完成了项目的创建,下一节开始项目的设计编码实现。

版权声明:本文为博主原创文章,未经博主允许不得转载。

【稀饭】react native 实战系列教程之自定义原生模块

影片详情开发也是通过Cheerio抓取并分析网页获取到的详情数据,本节就不作为详细内容来讲解了,详细的代码可以看下我的github,效果如下:在点击播放时,会跳转到播放界面,并且横屏显示,退出播放界面...

【稀饭】react native 实战系列教程之首页列表UI实现

首页设计与实现首先,这章节讲的是首页内容的设计与实现,不包括主界面的设计,因为一开始入手,我希望能立马获取到数据并能展示出来,后面再来搭木积似的一步一步把整体框架做起来。设计(图丑,莫见怪~)主界面的...

【稀饭】react native 实战系列教程之项目介绍

写之前当你在看该系列教程时,我想你应该和我一样起码是有些基础了。本人是Android原生开发的,业余时间学习了下react native。学习的初衷是:很多时候,移动开发要求既要会Android也要会...

【稀饭】react native 实战系列教程之热更新原理分析与实现

很多人在技术选型的时候,会选择RN是因为它具有热更新,而且这是它的一个特性,所以实现起来会相对比较简单,不像原生那样,原生的热更新是一个大工程。那就目前来看,RN的热更新方案已有的,有微软的CodeP...

【稀饭】react native 实战系列教程之完成首页

首页功能前面,我们已经完成了影视信息组件的开发,接下来,我们要用该组件来完成首页界面功能的开发,如下图可以看到,首页顶部一个标题栏,下面是‘最新’、‘最热’两个选项卡。我们要完成的有标题栏、选项卡、以...

【稀饭】react native 实战系列教程之数据存储

概述在开发一款APP,对于数据的存储是在正常不过了,在此之前,【稀饭】这个应用还没有用到存储数据的地方,为了学习研究React Native的数据存储,打算给应用增加【我的收藏】和【观看历史】这两个功...

【稀饭】react native 实战系列教程之自定义原生UI组件

上一节,讲了关于RN的自定义原生模块,本节是关于自定义原生UI组件,学习完本节,你将了解到原生UI组件的开发流程,以及js如何向native发送命令和native如何向js发送事件。原生UI组件之Vi...

【稀饭】react native 系列教程之已有项目接入React Native

概述 本文是基于目前公司的一个真实项目编写的,由于是边实践边记录,遇到什么问题和如何解决的,所以你看这篇文章的时候,可能有时候会觉得不是很流畅,特此说明。 引入React Native buil...

【稀饭】react native 系列教程之已有项目接入React Native

概述本文是基于目前公司的一个真实项目编写的,由于是边实践边记录,遇到什么问题和如何解决的,所以你看这篇文章的时候,可能有时候会觉得不是很流畅,特此说明。引入React Nativebuild.grad...

react native 实战系列教程之热更新原理分析与实现

很多人在技术选型的时候,会选择RN是因为它具有热更新,而且这是它的一个特性,所以实现起来会相对比较简单,不像原生那样,原生的热更新是一个大工程。那就目前来看,RN的热更新方案已有的,有微软的CodeP...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:【稀饭】react native 实战系列教程之项目初始化
举报原因:
原因补充:

(最多只允许输入30个字)