React-native Android環境搭建

基礎安裝

安裝Homebrew

Homebrew是Mac OSX的包管理器，咱們須要經過Homebrew安裝開發React Native的相關軟件包。 若是不知道怎樣安裝Homebrew能夠點這裏：官網。根據官網的介紹安裝便可。

安裝Node.js

$ brew install node

安裝watchman

watchman是Facebook用於監視JavaScript文件改動的開源項目。

$ brew install watchman

安裝flow

flow是Facebook開源的一個JavaScript靜態類型檢查器，用於發現JavaScript程序中的類型錯誤。

$ brew install flow

安裝react-native-cli

react-native-cli是React Native的命令行工具，安裝react-native-cli後咱們就可以經過react-native相關命令管理ReactNative工程。

$ npm install -g react-native-cli

iOS環境安裝

相對於Android環境搭建，iOS簡單太多了，太easy了！在基礎環境安裝成功以後，只需去Mac App Store下載Xcode，並安裝Xcode便可，首次安裝須要打開Xcode初始化。在初始化項目好以後，只需在項目根目錄運行下面命令便可：

$ react-native run-ios`

Android環境安裝

在Android環境，比較難搞，按照步驟安裝便可，不要放過任何步驟哦。

基礎軟件安裝

1. 安裝JDK jdk-8u101-macosx-x64.dmg

• 查看版本，命令行中運行javac -version

2. 安裝Android Studio

• 勾選Performance和Android Virtual Device
• 安裝相關SDK Platforms，記得勾選Show Package Details
• 安裝SDK Tools 必須是這個版本 Android SDK Build-Tools 23.0.1，記得勾選Show Package Details。
• ANDROID_HOME環境變量設置。（見下面 環境變量配置）方法

3. 安裝 免費VirtualBox虛擬機
4. 安裝模擬器Genymotion

• 註冊賬號
• 下載Genymotion
• 安裝Genymotion

環境變量配置

你能夠把Android SDK的tools和platform-tools目錄添加到PATH變量中，以便在終端中運行一些Android工具，例如android avd或是adb logcat等。

在~/.bash_profile中添加(若是你安裝的 ZSH 則在 ~/.zshrc中添加)：

PATH="~/Library/Android/sdk/tools:~/Library/Android/sdk/platform-tools:${PATH}" export PATH=$HOME/bin:/usr/local/bin:$PATH export ANDROID_HOME=~/Library/Android/sdk export PATH=${PATH}:${ANDROID_HOME}/tools

改完須要運行source ~/.bash_profile （注意：你的SDK的具體路徑可能不一樣）

測試服務端

這時候能夠用瀏覽器訪問
http://localhost:8081/index.android.bundle?platform=android
若是能夠訪問表示服務器端已經能夠了。

啓動步驟

啓動 Genymotion 設置

在應用中登陸，點擊按鈕Add下載模擬器設備，在Setting中設置ADB選擇User custom Android SDK tools.填寫地址，通常在目錄/Users/用戶名/Library/Android/sdk中，點擊按鈕Start啓動模擬器

 

在啓動前須要設置ADB SDK，不然會報錯 error: could not install smartsocket listener: Address already in use，解決方法：genymotion的adb設置Android sdk。以下圖：

 

運行命令啓動項目

進入項目的根目錄，也就是有package.json文件的目錄，運行react-native run-android啓動項目，以下動圖：

各類報錯

1. error: no devices/emulators found

Could not run adb reverse: Command failed: ~/Library/Android/sdk/platform-tools/adb reverse tcp:8081 tcp:8081

在Android環境下運行，會報下面錯誤，緣由是沒有鏈接手機會報以下錯，開發階段可忽視

2. react-native run-android時出現Could not download imagepipeline.aar

解決方法：修改build.gradle的版本，com.android.tools.build:gradle:2.1.0，改成更高的，而後更改gradle/wrapper/gradle-wrapper.properties中相應的gradle-2.10-all.zip。

3. Undefined symbols for architecture x86_64: 「std::terminate()」

解決方法：I ran in to this issue as well, and the solution @charpeni proposed solved the issue. To be clear for others, if you are upgrading to 0.26+ then you need to make the following changes.

In ios/YourProject.xcodeproj/project.pbxproj, look for the two lines like OTHER_LDFLAGS = "-ObjC";. Replace them with the following:

OTHER_LDFLAGS = (
        "-ObjC",
        "-lc++",
);

4. react-native run-android時出現Could not download imagepipeline.aar

解決方法：修改build.gradle的版本，com.android.tools.build:gradle:2.1.0，改成更高的，而後更改gradle/wrapper/gradle-wrapper.properties中相應的gradle-2.10-all.zip。

5. error: unable to find utility "instruments", not a developer tool or in PATH

 ~/Learning/ReactNative/AwesomeProject:  react-native run-ios
Found Xcode project AwesomeProject.xcodeproj
xcrun: error: unable to find utility "instruments", not a developer tool or in PATH Command failed: xcrun instruments -s xcrun: error: unable to find utility "instruments", not a developer tool or in PATH

輸入sudo xcode-select -s /Applications/Xcode.app/Contents/Developer/而後就能夠運行react-native run-ios了。

6. Property 'force' not found on object of type 'UITouch'

出現這種相似錯誤，只能升級Xcode咯。

7. Ignoring return value of function declared with warn_unused_result attribute

這個報錯在此文件中有兩處，代碼

SecRandomCopyBytes(kSecRandomDefault, sizeof(uint32_t), (uint8_t *)mask_key);

修改成

(void)SecRandomCopyBytes(kSecRandomDefault, sizeof(uint32_t), (uint8_t *)mask_key);

前面加上(void)。

8. Use of undeclared identifier '_refreshControl'; did you mean 'refreshControl'?

@implementation RCTCustomScrollView{
  __weak UIView *_dockedHeaderView;
  RCTRefreshControl *_refreshControl;  // 加入此行
}

9. Execution failed for task ':react-native-update:compileReleaseNdk'.NDK not configured.

錯誤信息

* What went wrong:
Execution failed for task ':react-native-update:compileReleaseNdk'.
> NDK not configured.
  Download the NDK from http://developer.android.com/tools/sdk/ndk/.Then add ndk.dir=path/to/ndk in local.properties.
  (On Windows, make sure you escape backslashes, e.g. C:\\ndk rather than C:\ndk)

解決方法：下載安裝NDK和相關工具，菜單進入 Tools > Android > SDK Manager 在選項卡中選擇 SDK Tools，選擇 LLDB, CMake, 和 NDK 勾選，點擊 Apply 進行下載安裝。

參考資料

• 官方搭建開發環境
• reactnative.cn搭建開發環境
• 極客學院搭建開發環境
• React Native開發過程當中遇到的問題

 

原文地址：https://github.com/jaywcjlove/handbook/blob/master/Android/React-native%20Android環境搭建.md