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就跑起来了。

  • 相关阅读:
    Validation failed for one or more entities. See 'EntityValidationErrors' property for more details
    Visual Studio断点调试, 无法监视变量, 提示无法计算表达式
    ASP.NET MVC中MaxLength特性设置无效
    项目从.NET 4.5迁移到.NET 4.0遇到的问题
    发布网站时应该把debug设置false
    什么时候用var关键字
    扩展方法略好于帮助方法
    在基类构造器中调用虚方法需谨慎
    ASP.NET MVC中商品模块小样
    ASP.NET MVC中实现属性和属性值的组合,即笛卡尔乘积02, 在界面实现
  • 原文地址:https://www.cnblogs.com/yuyujuan/p/9708690.html
Copyright © 2011-2022 走看看