React Native Android 開發環境搭建,只需4步。

自己在搭建 React Native Android 版開發環境的時候,參考了很多文章,發現多數文章提供的資料過于繁雜,對于一個常年用真機調試的 Android 開發者來說,React Native 開發環境的搭建是可以更簡單的。此文受用的對象是使用 Mac 以及真機調試的 Android 開發人員。最好確保你有個健全的網絡(你懂的)。

Homebrew

號稱是 MacOS 不可或缺的套件管理器,反正就是你可以用它來下載安裝 Node.js , React Native 命令行工具的工具。Homebrew 的中文介紹點 這里 。打開 Mac 終端,輸入如下命令安裝:

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

安裝完成后輸入:

brew -v

若顯示出了 Homebrew x.x.x 則標識安裝成功。 如果你不確認之前是否已經安裝了 Homebrew 也可以使用該命令來檢測。

注:在Max OS X 10.11(El Capitan)版本中,homebrew在安裝軟件時可能會碰到 /usr/local 目錄不可寫的權限問題:”EACCES: permission denied” 。可以使用下面的命令修復:

> sudo chown -R `whoami` /usr/local
>

Node.js

這玩意官網的介紹是:一個基于 Chrome V8 引擎的 JavaScript 運行環境。從概念上講就類似 Java 的 JRE 了。

接下來就可以使用 Homebrew 來安裝 Node.js 了,命令如下:

brew install node

React Native 中文網教程寫到 “React Native需要NodeJS 4.0或更高版本,本文發布時Homebrew默認安裝的是6.x版本,完全滿足要求。”

咱使用下面這個檢查 Node.js 版本號的命令來驗證下。

node -v

我的結果的是 v4.1.2 ,不知道是教程的問題還是我安裝時選擇的不同選項的問題。注:Node.js 官網也提供兩個版本,一個是 LTS 長期提供支持的穩定版本,目前為 v4.6.0。另一個是當前最新版本,目前為 v6.8.1。v4.1.2 好歹還能用,先不糾結這個,繼續下一步。

React Native的命令行工具(react-native-cli)

沒什么好說的,React Native 的命令行工具用于執行創建、初始化、更新項目、運行打包服務(packager)等任務。安裝命令如下:

npm install -g react-native-cli

環境變量配置

英文官網對 Android Studio 和 JDK 并沒有提出具體的版本要求,大家可以用自己現有的開發環境試試。

ANDROID_HOME 環境變量:確保 ANDROID_HOME 環境變量正確地指向了你安裝的Android SDK的路徑。具體的做法是把下面的命令加入到 ~/.bash_profile 文件中。而小數點開頭的文件在Finder中是隱藏的,并且這個文件有可能并不存在。請在終端下使用 sudo vi ~/.bash_profile 命令創建或編輯。

關于 vi 操作,自己是真的不熟悉,現在摘錄一段基本操作。以避免大家在這浪費太多時間。進入 vi 編輯頁面后,此時是出于命令行模式,是無法輸入文字的。這時候按下 i 鍵,切換到—INSERT—模式,進行編輯操作。編輯完后,按 esc 鍵退出到命令行模式。按下 :冒號鍵進入 Last line mode。輸入 wq 進行存盤退出。

熟悉操作后,在 .bash_profile 文件中加入下面兩行代碼 ( 注:~表示用戶目錄,即 /Users/你的用戶名/ ) ,可以使用 echo $ANDROID_HOME 檢查此變量是否已正確設置。

export ANDROID_HOME=~/Library/Android/sdk
export PATH=${PATH}:${ANDROID_HOME}/tools

簡單來說,使用真機調試的同學,React Native 開發環境就已經搭建完畢了。下面就可以進行 React Native 項目測試了。

測試你的第一個 React Native 項目

先初始化一個名為 AwesomeProject (可用任意名稱替換 ) 的 RN 項目,后進入該項目的目錄,輸入運行命令等待部署運行即可。命令如下:

react-native init AwesomeProject 
cd AwesomeProject
react-native run-android

現在你已經成功的運行了第一個 RN 項目,我們可以嘗試下修改下。

在 AwesomeProject 文件夾下找到 index.android.js 文件,可以將 Hello, World 字符串改為任意字符,然后搖一搖手機,會出現配置菜單,選擇 Reload js,你剛剛的修改就會立馬生效。是不是已經體會到了 RN 的神奇了?

真機運行的注意事項以及你可能會遇到的問題

(Android 5.0及以上)使用adb reverse命令

注意,這個選項只能在5.0以上版本(API 21+)的安卓設備上使用。

首先把你的設備通過USB數據線連接到電腦上,并開啟USB調試(關于如何開啟USB調試,參見上面的章節)。

  1. 運行 adb reverse tcp:8081 tcp:8081
  2. 不需要更多配置,你就可以使用 Reload JS 和其它的開發選項了。

(Android 5.0以下)通過Wi-Fi連接你的本地開發服務器

  1. 首先確保你的電腦和手機設備在 同一個Wi-Fi環境 下。
  2. 在設備上運行你的React Native應用。和打開其它App一樣操作。
  3. 你應該會看到一個“紅屏”錯誤提示。這是正常的,下面的步驟會解決這個報錯。
  4. 搖晃設備,或者運行 adb shell input keyevent 82 ,可以打開 開發者菜單
  5. 點擊進入 Dev Settings 。
  6. 點擊 Debug server host for device 。
  7. 輸入你電腦的IP地址和端口號(譬如10.0.1.1:8081)。 在Mac上 ,你可以在系統設置/網絡里找查詢你的IP地址。
  8. 回到 開發者菜單 然后選擇 Reload JS 。

可能會遇到的問題

問題一

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':app:installDebug'.
> com.android.builder.testing.api.DeviceException: com.android.ddmlib.InstallException: Unable to upload some APKs

解決辦法:把項目中的~/android/app/build.gradle中的gradle版本改為1.2.3

問題二

搖一搖手機沒辦法出現 Reload Js 設置菜單

解決辦法:在小米和魅族系統中只要在應用管理的權限管理中開啟懸浮窗權限即可解決。

接下來的安排

React Native 集成到現有的 Android 項目

React Native 項目熱更新

React Native 優化(包大小優化,預加載解決首次加載白屏等)

 

來自:http://motalks.cn/2016/10/23/React_Native_Development_Environment/

 

 本文由用戶 nomandia 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!