react native 开发前准备
官网 https://reactnative.cn/
为什么用react native 这个没什么解释的,你爱用不用,总之有人用,而且部分的大厂要求使用(尽管这东西有一大堆蛋疼的地方)
1.入门要求
- Mac电脑开发这个不解释
- 有Android iOS开发经验(非硬性,基本上所有的问题都能度娘)
- 至少浏览一遍官网 https://reactnative.cn/.
- 配置环境 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 配置代码提示