環境安裝
React Native運行需要安裝一些依賴環境,比如JDK、NodeJS、Android SDK等。這些環境的下載地址如下:
1、JDK 下載地址: http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
根據自己的操作系統選擇相應版本jdk下載安裝,我是windows 64位系統,安裝之后配置環境變量JAVA_HOME、CLASSPATH。并把可執行工具目錄添加到path。如下圖所示:
2、安裝NodeJS開發環境 下載地址:http://nodejs.cn/download/。下載安裝之后把可執行命令工具添加到環境變量path中。
安裝完之后建議設置npm鏡像以加速后面的過程。
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
在這里我們可以用如下命令下載react-native-cli
npm install -g react-native-cli
但是facebook推薦用Yarn工具。此工具下載的包速度比npm更快。我們也把它下載下來。
npm install -g yarn react-native-cli
下載完成后我們也設置下鏡像:
yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global
之后我們就可以用yarn命令代替npm來下載模塊。
3、android studio開發工具 下載地址:https://developer.android.com/studio/index.html 或者用第三方地址http://www.androiddevtools.cn/
下載安裝之后,添加ANDROID_HOME環境變量,同時把SDK的可執行工具目錄添加到path上。如下圖所示
可選安裝
1、git安裝 下載地址:https://git-for-windows.github.io/。安裝的時候記得勾選"Run Git from Windows Command Prompt",添加git命令到path
2、模擬器 android studio自帶的模擬器運行速度很慢,可以安裝Genymotion或者適用于 Android 的 Visual Studio 模擬器。
Genymotion 先要注冊帳號,官網地址:https://www.genymotion.com/
Visual Studio 模擬器下載地址:https://www.visualstudio.com/zh-hans/vs/msft-android-emulator/?rr=http%3A%2F%2Freactnative.cn%2Fdocs%2F0.47%2Fgetting-started.html
3、gradle 官網地址:https://gradle.org/ 下載之后添加可執行工具目錄到path下。
安裝測試
環境安裝的差不多了,我們來開始第一個測試工程。
切換到你的工作目錄。然后執行如下命令,將會新建react native工程,我這里的項目名稱為myProject。
cd D:\workspace
react-native init myProject
工程如果第一次創建失敗,可以再運行一次命令。
react-native的詳細用法可以通過react-native --help
查看
創建成功后進入工程目錄
cd myProject
react-native run-android
如果運行成功,在模擬器或者真機上可以看到如下畫面:
從設備上訪問開發服務器
在啟用開發服務器的情況下,你可以快速的迭代修改應用,然后在設備上查看結果。按照下面描述的任意一種方法來使你的運行在電腦上的開發服務器可以從設備上訪問到。
1、(Android 5.0及以上)使用adb reverse命令
adb reverse tcp:8081 tcp:8081
2、(Android 5.0以下)通過Wi-Fi連接你的本地開發服務器
a、首先確保你的電腦和手機設備在同一個Wi-Fi環境下。
b、在設備上運行你的React Native應用。和打開其它App一樣操作。
c、你應該會看到一個“紅屏”錯誤提示。這是正常的,下面的步驟會解決這個報錯。
d、搖晃設備,或者運行adb shell input keyevent 82,可以打開開發者菜單。
e、點擊進入Dev Settings。
f、點擊Debug server host for device。
g、輸入你電腦的IP地址和端口號(譬如10.0.1.1:8081)。在Mac上,你可以在系統設置/網絡里找查詢你的IP地址。在Windows上,打開命令提示符并輸入ipconfig來查詢你的IP地址。在Linux上你可以在終端中輸入ifconfig來查詢你的IP地址。
h、回到開發者菜單然后選擇Reload JS。
如果設置成功,可以用react-native start
啟動服務器,然后在瀏覽器輸入如下網址查看是否成功連接:
http://localhost:8081/index.android.bundle?platform=android
調試工具
在Chrome瀏覽器中輸入 http://localhost:8081/debugger-ui,打開調試界面。
參考資料
1、http://reactnative.cn/docs/0.47/getting-started.html#content
2、http://facebook.github.io/react-native/docs/getting-started.html
3、https://github.com/facebook/react-native