React Native初步学习(一)

前端之家收集整理的这篇文章主要介绍了React Native初步学习(一)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

React native真是个好东西,页面上的东西都由JS来渲染、处理。它是由Facebook公司开发的,秉承着:

Learn once,Write everywhere: Build Mobile APP with React.

建议参考网址:

入门安装

我的开发环境是win10,具体环境配置可去上面官方文档中文版中寻找步骤。开发的是Android项目。
React Native需要以下工具:node(需要4.0版本以上)、Android开发环境(Android SDK + Java环境)。
每个操作系统都有自己的包管理器,可以利用包管理器快速方便的下载你想要的东西:

上面具体的安装我就不讲了。

创建项目

下面就是创建项目的时候了。
打开命令行,进入到你想创建项目的文件目录位置。输入如下的命令:

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

前两个命令比较费时。第二个命令的话,它会帮你创建一个名叫AwesomProject的项目,创建该项目的时候,ios和android代码都会有。看下目录结构:

除了component那个文件夹是我自己创建的,其他的都是react-native帮我生成的。在项目中包括了ios和android的代码。在下面还有两个js文件,分别是index.android.js和index.ios.js。这两个文件就是后面我们要学习的react-native。那android这个文件夹都是什么东西呢?

看到了么,其实里面是个android工程,里面放着一些源代码,但是这些源代码很简单。在我们启动一个app时,需要通过androidmanifest.xml中来选择初始进入的页面,例如页面是loginActivity,然后该activity是继承自ReactActivity,并且指定该Activity由哪个JS Component来渲染、处理。所以刚刚我们提到的index.android.js就是来渲染Activity的。React Native的好处就是页面和逻辑上任何的修改,都不需要重新安装应用,只需要修改js并重新获取js即可。而这个js可以适用于Android和IOS,这也验证了Learn once,Write everywhere。

跑起来

现在项目已经创建完毕,要跑起来看看,运行如下命令(需要在工程目录文件下):

$ react-native run-android

这个命令其实包含两个操作,第一个操作是将app目录下的工程安装在我们的手机(或者模拟器)中,第二部操作是运行小服务器。这个服务器是干嘛的,其实我们运行起来的客户端需要连接到该服务器,请求渲染页面的JS代码
所以这句命令行你可以这么分步来操作:

  1. 安装app下的项目到手机中(可以使用adb install,也可以导入到android studio中来安装)。
  2. 运行命令:
react-native start

这句命令是用来开启服务器的,每次开启这个服务器比较慢,大概要两三分钟等待。
为什么要讲这个呢,比如你的JS代码除了什么语法或者其他错误,崩溃了,如果你运行react-native run-android的话,就太多余了,因为app代码没变,只是js代码需要重载。那么这个时候你改完js代码就不需要重新安装app,重启服务器就好了,只需运行react-native start即可。
因为手机要连到电脑开启的服务器,所以手机必须和电脑处于同一局域网,可以通过设置代码或者更改host!!!!
看下运行起来的样子(每次重启服务器要2、3分钟,比较慢):

该命令行中可以看到,在17:32分时,客户端向服务器请求了一条数据,也就是获取渲染的js代码
接下来看下客户端:

页面说明客户端正在请求服务器数据。
当服务器返回数据:

客户端正确显示(这是我写的一个demo):

如果你想要重载页面,可以摇一摇你的手机(真机摇一摇,如果是模拟器的话,按下菜单按钮 ,默认情况下是 F2,或在 Genymotion 中点击 ⌘ M),出现如下页面

我来解释下:

  • Reload:就是重新向服务器获取数据。
  • Enable Hot Reloading:当服务器的js代码变更时,会自动通知客户端刷新页面。这可是太方便了,如果你改个页面的参数,只要一点击保存,客户端立马能够反映出来,再也不用像以前那样重新编译了。
  • Toggle Inspector:可以让你查看一些参数,比如访问服务器的结果。
  • Show Perf Monitor:查看页面绘制属性
  • Dev Setting:主要是设置,点进去的话可以修改一些一些参数。
    例如那个Debugserver host & port for device,如果你是在真机上测试,你的手机和你的电脑连至同一局域网后,需要点击这个输入你的电脑的ip和端口(8081),我输入的是:10.240.88.201:8081,不设置的话,你页面上无显示。如果是模拟器的话,就不用了,因为他查询localhost的话,是可以连到本机的服务器的。 上面这些都是让你使用demo的步骤。

猜你在找的React相关文章