zoukankan      html  css  js  c++  java
  • 我的第一个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就跑起来了。

  • 相关阅读:
    tomcat监控与优化
    rpm打包
    Rewrite和location 区别
    LNMP服务
    yum仓库脚本
    用户管理的脚本2
    pxe装机脚本
    用户管理的脚本1
    磁盘管理综合测试题
    MySQL 增量备份介绍及案例演示
  • 原文地址:https://www.cnblogs.com/yuyujuan/p/9708690.html
Copyright © 2011-2022 走看看