Windows下React Native開發環境的搭建

KeWen-Du發表於2018-05-06

React、React.js、React Native三者的聯絡

  • React 是基礎框架,提供了一套基礎設計實現理念。
  • React.js 是在 React 理念的指導下產生的專門用來開發網頁的 web 前端框架。與 React 同時出現和發展,React 的相關概念都在 React.js 文件中。
  • React Native 是用來開發移動端 app 的。只不過是用了 React.js 那套模式,而底層是對 Native Code 的封裝及呼叫。

Chocolatey

Chocolatey是一個Windows上的包管理器,類似於Ubuntu上的apt,centos上的yum,可以用命令列來安裝應用程式,以管理員的身份執行cmd。輸入以下的語句:

powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))" && SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin
複製程式碼

nodejs

開啟cmd,使用Chocolatey來安裝nodejs,輸入以下程式碼:

choco install nodejs.install
複製程式碼

nodejs也可以直接去對應的官網下載。安裝完nodejs後設定淘寶映象,加速npm下載包的速度。npm是nodejs提供的包管理器。

yarn

Yarn是Facebook提供的替代npm的工具,可以加速node模組的下載。開啟cmd輸入下面的程式碼安裝yarn:

npm install -g yarn react-native-cli
複製程式碼

安裝完yarn後同樣也要設定淘寶映象源,npm和yarn的官方網站都在國外,在國內用npm和yarn下載第三方依賴包的速度很慢,這個時候就要用到國內的映象網站了,這會讓你npm、yarn 包的速度比較快。

yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global
複製程式碼

安裝玩yarn就可以用yarn替代npm了,例如用yarn代替npm install命令,用yarn add 某第三方庫名代替npm install --save 某第三方庫名。

Android Studio

Android Studio是一個為Android平臺開發程式的整合開發環境,就是一個IDE,Android Studio需要Java Development Kit [JDK] 1.8(暫不支援更高版本)。你可以在命令列中輸入 javac -version來檢視你當前安裝的JDK版本。如果版本不合要求,則可以到 官網上下載。 或是使用包管理器來安裝(比如choco install jdk8或是 apt-get install default-jdk) 你們也可以選擇用其他IDE和編輯器,例如VS code、sublime和Atom。參考下面連結。 Atom、Sublime Text、VSCode 三者比較,各有哪些優勢和弱勢?

AndroidSDK的安裝和配置

Android Studio裡面帶有Android SDK可以不用下載了。使用其他IDE的話就要下載AndroidSDK了。 AndroidSDK可以到官網下載,不過下載速度比較慢。下面給一個我師兄給我的SDK包。
連結:pan.baidu.com/s/1kXZaadoM… 密碼:idof
按照上面這個連結下載SDK是已經安裝後的包,直接解壓到想存放的目錄就好了。
接下來還要配置tools和platfirm-tools的環境變數。開啟高階系統設定中的環境設定。 在系統變數裡面新建一個ANDROID_HOME變數,在變數值裡面輸入AndroidSDK的安裝路徑。

Windows下React Native開發環境的搭建
編輯系統變數裡面的PATH,最後面加上下面的路徑。

;%ANDROID_HOME%\platform-tools;%ANDROID_HOME%\tools
複製程式碼

Windows下React Native開發環境的搭建
Windows下React Native開發環境的搭建
接著在cmd輸入android -h驗證環境變數是否配置成功。

Windows下React Native開發環境的搭建
在AndroidSDK安裝目錄下找到SDK manager.exe點選開啟。 勾選圖片上紅框的內容,點選install package..安裝。速度會慢一點。耐心等待就好了。

Windows下React Native開發環境的搭建

Git

你可以使用Chocolatey來安裝git:

choco install git
複製程式碼

另外你也可以直接去下載Git for Windows。 在安裝過程中注意勾選"Run Git from Windows Command Prompt",這樣才會把git命令新增到PATH環境變數中。
{摘自React Native - 入門介紹}

Genymotion

比起Android Studio自帶的原裝模擬器,Genymotion是一個效能更好,適合開發者的一個安卓模擬器。安裝教程在我的上一篇文章裡面有詳細講解。

開啟APP專案

VirtualBox和Genymotion安卓模擬器, 接著開啟cmd進入你的APP專案的目錄,輸入 react-native run-android執行專案。

Windows下React Native開發環境的搭建
看到命令列游標閃爍的話不用急,等他載入完。沒有報error的話都是沒問題的。 過程中還會彈出nodejs載入app的頁面。
Windows下React Native開發環境的搭建
Windows下React Native開發環境的搭建
看到successful就說明執行成功了。你可以在你的安卓模擬器上面看到你執行的程式。

本文參考連結:

相關文章