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的安裝路徑。
;%ANDROID_HOME%\platform-tools;%ANDROID_HOME%\tools
複製程式碼
接著在cmd輸入android -h驗證環境變數是否配置成功。
在AndroidSDK安裝目錄下找到SDK manager.exe點選開啟。
勾選圖片上紅框的內容,點選install package..安裝。速度會慢一點。耐心等待就好了。
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
執行專案。