第二卷 - 環境以及快速開始


React Native 之旅 02 - 快速開始!

啊. 我無言了。



官方文件對照

雖然說是快速開始,但也沒有真的到多快速…,一樣的,這篇是半個環境的設定,也許你會覺得奇怪,01 不是已經提過了環境這件事情,不過 01 指的是需要執行跟 build 的環境,這章題的是 React Native。


安裝 React Native Cli

安裝 react-native-cli,倘若你有權限的問題,請記得加 sudo:

npm install -g react-native-cli

初始化一個新的 React Native 專案

AwesomeProject 表示為專案的名稱。

react-native init AwesomeProject

init 之後 cli 為吐一些訊息:

To run your app on iOS:
   cd /Users/win/AwesomeProject
   react-native run-ios
   - or -
   Open /Users/win/AwesomeProject/ios/AwesomeProject.xcodeproj in Xcode
   Hit the Run button
To run your app on Android:
   Have an Android emulator running (quickest way to get started), or a device connected
   cd /Users/win/AwesomeProject
   react-native run-android

init 會幫你 fetch 出一些 source code,ios 的話是 iOS 的資料夾,有個 AwesomeProject.xcodeproj,android 的話則是一個 gradle 的 project,在 android/app 的資料夾。

然後進到 AwesomeProject

cd AwesomeProject

(1) Run 成 iOS app

react-native run-ios

Alt text


(2) Run 成 Android app:

react-native run-android

Run Android 踩雷記事:

若 run-android 出現類似這個錯誤:

What went wrong:
A problem occurred evaluating project ':app'.

> SDK location not found. Define location with 
sdk.dir in the local.properties file or with an
ANDROID_HOME environment variable.

解法:

  1. 進到 android 資料夾,自己 create 一個檔案,叫做 local.properties
      touch local.properties && vi local.properties
    
  2. 編輯 local.properties,新增這一行 (請把 username 換成你自己,如果你不知道自己是誰==,請用 whoami 查一下…):
  sdk.dir = /Users/USERNAME/Library/Android/sdk
  1. 存檔之後重新 react-native run-android
  2. 參考: http://stackoverflow.com/questions/32634352/react-native-android-build-failed

若出現以下錯誤:

* What went wrong:
A problem occurred configuring project ':app'.
> failed to find Build Tools revision 23.0.1

那就再次開啟 android sdk manager (在 cli 下 android 就行),先檢查錯誤訊息要求的版本有沒有裝。 不過像我已經裝了,卻有這個 error,就很奇怪…,所以我選擇的解法是修改 android/app/build.gradle,把 buildToolsVersion 改為 buildToolsVersion "23.0.2",然後 targetSdkVersion 23,結果 ok。


若出現以下錯誤:

* What went wrong:
Execution failed for task ':app:installDebug'.
> com.android.builder.testing.api.DeviceException: No connected devices!

請你先啟動 AVD android avd,然後選擇一個 Device 重新做 Start。


若出現以下錯誤:

com.android.builder.testing.api.DeviceException: 
com.android.ddmlib.InstallException: Failed to establish session

那… 請開啟 avd 被啟用的那個 device 的設定,把 Use Host GPU 設定打開,再重啟 Device。

Alt text


BUILD SUCCESSFUL

終於!!!!看到這句我也累了。…

Find my AwesomeProject

對了,如果你有看到 unfortunately awesomeproject has stopped,就先把它ok掉。 發現模擬器打開之後,不知道自己的 app 在哪裏嗎?!

Alt text

Alt text

Alt text

Alt text

結語


創用 CC 授權條款
React Native 學習之旅winwu製作,以創用CC 姓名標示-非商業性-禁止改作 3.0 台灣 授權條款釋出。