我的第一个react native

虽然react native出来了很久,但是自己一直因为各种原因没有接触学习,中间尝试过一次,但是因为复杂的环境配置而放弃了。现在,终于因为公司的项目不得不去学习了,当然了,再配置开发环境上面,我还是懵懵的,网上找各种帖子,东拼西凑,还多次询问别人才好不容易把环境搭出来的,但是今天并不是为了说明我是如何搭建环境的,毕竟现在网上帖子太多了,而且自己虽然弄出来了,但是并不懂其中的究竟。所以今天仅仅只是为了纪念自己的第一个demo。

在各种环境配置好了,包括虚拟机配置正常了以后,其实我并不是很清楚应该怎么开始自己的第一个项目,所以也走了很多弯路,下面是自己在各种环境配置好了以后到第一个页面出来的过程。

相比较而言,flutter的环境配置会相对简单很多,这里推荐看另外关于flutter环境配置的随笔,安装完成以后,可以进行查看和开启模拟器。

查看已安装的模拟器

先找到android SDK的安装目录,切换到改目录下面的emulator目录下,执行命令emulator -list-avds

开启模拟器

先找到android SDK的安装目录,切换到改目录下面的emulator目录下,执行命令emulator.exe -netdelay none -netspeed full -avd 模拟器名称

不是很明白为啥会报这个错,只知道需要将emulator文件夹下面的部分内容复制到tools文件夹以后就可以了

需要注意的是,在整个项目运行的过程中,我们刚刚打开的命令行窗口都是不能关闭的,每次项目结束,下一次再开启的时候,有需要执行上面的命令启动虚拟机。

编辑器

网上的帖子最多是用到Android Studio,xcode,Atom。首先,如果需要安装虚拟机,就要安装Android Studio,但也可以用其他的虚拟机,而且后续都是采用命令启动虚拟机,所以根本不会再打开这个软件了,白痴的我之前每次都打开,都在纠结为什么虚拟机的那个图标是灰色的......;其次因为我是用的Windows系统,所以根本用不到xcode;最后就是Atom,至于这种编辑代码的软件,因为我自己不熟悉Atom,所以就选择了vs code,这个的话就是根据自己的喜好选择了。

创建项目

首先要在自己希望的位置生成一个文件夹,用来存放项目,然后再重新开启一个命令行窗口(不能是前面启动虚拟机的那个命令行窗口),定位到相应的文件夹下面,主要是进行盘符切换和目录定位

上面主要是展示了我的项目放在的目录,最后一句是创建一个名称为demo的项目,大概一分钟以后,项目生成完成了,我们可以在相关的目录下查看生成的项目。

之前我一直都不明白为什么我生成的项目里面只有一个index,但是网上看到的项目都是有两个index的,分别是index.android.js和index.ios.js,后来才发现是版本的原因,因为网上的资源都是趋向于有两个index的版本,为了便于自己后期查阅资料,所以,我又重新新建了一个指定版本的项目。

等一分钟以后,新项目创建完成,我们使用自己的编辑器打开项目就可以了。

如果是从svn上面直接剪项目,就不用上面这么麻烦,自己创建项目了,只需要定位到项目的根目录,执行命令下载项目就可以了:npm install

连接虚拟机

 项目创建完成以后,需要连接虚拟机,要打开命令行窗口,切换到项目的根目录,先查找模拟器:adb devices

然后再进行连接:react-native run-android 

等一会儿以后,项目就跑起来了。

以上命令用于第一次将app装进模拟器,后期重启项目后,该app已经存在了,只需要 查找到模拟器后,执行启动命令就可以了:react-native start

因为我用的是Windows系统,所以默认执行的是index.android.js里面的代码

接下来,我们所有的操作都是围绕着这个文件进行,这些就后续再记录了,下面在简单说一下调试方面的事情,例如我们要更改上面的代码:

这个时候,我们需要再次执行命令行来刷新界面。

此时,模拟机上面会出现弹框,我们点击第一个就可以了。

  

现在,我们的第一个小小的demo就跑起来了。

原文地址:https://www.cnblogs.com/yuyujuan/p/9708690.html