ReactNative-01(環境搭建及工具配置)

前言

個人感覺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,有興趣的小夥伴可以一起學習.

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章