前言
個人感覺ReactNative慢慢的將會越來越流行,畢竟可以花一樣的時間,甚至更少的時間開發兼容Android和IOS兩個平臺的應用,但是在這之前,我們需要了解一些前端知識,如JS和ES6等,那麼我們就一步一步來學習這個框架是怎麼使用的?
配置環境
安裝Chocolatey
在箭頭處右鍵以管理員身份運行,然後輸入命令
Set-ExecutionPolicy AllSigned
或者命令
Set-ExecutionPolicy AllSigned
然後再cmd命令窗口(以管理員身份運行,以下不在說明)輸入以下代碼:
@powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"
上面完成以後我們就完成了軟件管理器Chocolatey 的安裝,它的好處就是可以想linux一個通過命令便捷的安裝所需軟件.
安裝Python 2和Node
繼續在命令窗口輸入以下內容:
choco install python2
choco install nodejs.install
下面就去添加系統環境變量
如箭頭所示:點擊新建然後輸入:
C:\Users\你的用戶名\AppData\Roaming\npm\node_modules\npm\bin
然後再你的輸入命令npm,看環境變量是否配置成功.
如果如圖所示,說明配置成功,配置成功以後我們就更改鏡像源,改爲國內的ip,如果你翻牆了,可以忽略.
輸入以下代碼:
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
安裝eact-native-cli
代碼如下:
npm install -g yarn react-native-cli
它是用於執行創建、初始化、更新項目、運行打包服務(packager)等任務。
測試是否安裝,cd到你想要創建文件的目錄,然後輸入:
react-native init 任意的工程名
如果正常運行並生成了一個工程,那麼你的環境就配置好了.例如我在E:盤生成了一個HelloWorld,那麼我怎麼打開他呢?下面就用到了IDE.
AS的安裝和環境配置
此處省去一萬字,看我博客的基本上都是Android程序員,這個估計都已經配置好了,記得配置D:\AndroidSdk\tools和D:\AndroidSdk\platform-tools兩個目錄到path就好.
WebStorm的配置
外觀配置
爲什麼要選用它,因爲我們開發Android的幾乎都是用的AS啊,當然也有少部分人用的是Eclipse,WS(WebStorm簡稱)和AS的配置文件是可以相互通用的,如何把我們AS常用的字體大小,配色,主題風格移植過來呢?看圖
不需要的配置都把它給去掉,然後點擊OK就會在指定目錄生成一個settings.jar,好了我們現在打開WS,點擊File,同AS,只不過是點擊Import Settings.選你剛保存Setting,jar.到這裏,你的WS和AS風格基本上就同意了,git,svn什麼的也不用重新配置了.
項目配置
現在就讓我們打開剛纔生成的HelloWorld項目吧,點擊File->Open,選你剛纔的項目目錄,然後如下圖:
你發現並沒有運行的那個三角符號,下面我們就配置:
點擊向下的箭頭,有相應的提示,選上去.
然後選擇你的項目,點擊Apply,好了,現在你開一個模擬器或者真機,你就可以運行了.
note WS最好以管理員身份運行.還有就是我們在同時開了兩個項目的同時,有可能出現以下錯誤:
ERROR Packager can’t listen on port 8081
說明有一個項目正在調試,沒有關閉.在運行另一個項目的時候,記得點擊當前項目的
本人也是剛開始研究RN,有興趣的小夥伴可以一起學習.