react native 开发APP(一)

react native 开发前准备

官网 https://reactnative.cn/

为什么用react native 这个没什么解释的,你爱用不用,总之有人用,而且部分的大厂要求使用(尽管这东西有一大堆蛋疼的地方)

1.入门要求

  1. Mac电脑开发这个不解释
  2. 有Android iOS开发经验(非硬性,基本上所有的问题都能度娘)
  3. 至少浏览一遍官网 https://reactnative.cn/.
  4. 配置环境 node Xcode AndroidStudio (这个就不用解释了,都不是重点)

你必须完成环境配置,否则都白瞎

2.新建APP项目

新建项目命令代码

npx react-native init DemoProject

或者

npx react-native init DemoProject --version  0.44.3

这两个的区别在于指定react native版本,若不指定默认最新
version前面两个杠子,版本号必须精确到两个小数点
项目名称DemoProject项目路径纯英文绝对不会有错

运行命令
在这里插入图片描述
中间出现错误,不用管它,不影响项目执行
在这里插入图片描述
执行完成以后
在这里插入图片描述
到这一步,新建APP的所有工作都完成了

3.试运行APP项目

上面初始化命令下载文件完成以后可以通过代码启动Android模拟器和iOS模拟器,也可用xcode和AndroidStudio启动

a.试运行iOS

在这里插入图片描述
直接用Xcode打开就行。。。。

在这里插入图片描述

b.试运行Android

在这里插入图片描述
当同样的方式打开Android的时候出现问题了, 也就是Android的项目如果想跑起来必须使用命令方式
想到项目所在的 根目录 根目录 根目录

在这里插入图片描述
然后执行命令在这里插入图片描述
到项目所在的根目录 根目录 根目录
Android对应的启动命令是

yarn react-native run-android 

iOS可以通过运行项目启动,也可以命令启动

 yarn react-native run-ios 

4.用什么工具开发react native

IDE有很多选择,但是jetbrains家族的IDE应该是最好用的,多了不解释,看个人爱好,本人使用的是webstorm
在这里插入图片描述
我们用webstrom打开我们的项目
注意打开的是根目录
在这里插入图片描述
如下图示,我们就可以用react native开发APP了 。
在这里插入图片描述
保存自动更新UI 。。。。。。。。 先撸一遍看下。。。。。

5.Webstorm 配置React-native环境

第一步配置JavaScript
在这里插入图片描述
第二步配置ESLint 这个避免一些警告
在这里插入图片描述

第三步 下载react native代码提示包
在这里插入图片描述

可参考这个 https://www.jianshu.com/p/07cd7e9baa58 配置代码提示

发布了235 篇原创文章 · 获赞 58 · 访问量 49万+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章