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萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章