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 配置代碼提示