我的第一个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就跑起来了。