Jame's Blog

前端開發心得 front-end Develop

React Native 初體驗

| Comments

今天安裝開發環境發生一些狀況 在這邊筆記一下

step 1. 先把 brew 安裝的 node 改成 用 nvm 管理。

  1. 先反安裝 brew uninstall node
  2. 然後安裝 brew install nvm
  3. 在 .bash_profile 加上 source $(brew --prefix nvm)/nvm.sh
  4. 再來用 nvm 安裝 node
  5. nvm install node && nvm alias default node (參考facebook的操作)

step 2. 然後安裝相關的套件

  1. brew install watchman
  2. brew install flow
  3. npm install -g react-native-cli

step 3. 接下來就可以透過 react-native 產生專案資料夾,這部分跟 phonegap 很類似

  1. $ react-native init AwesomeProject
  2. $ cd AwesomeProject/

step 4. 產生完資料夾之後,可以透過指令,產生 iOS 及 android 的 app

  • iOS
    1. 用 Xcode 打開 AwesomeProject.xcodeproj
    2. 然後執行 run 讓 Xcode 進行編譯
    3. Xcode會自動開啟模擬器
    4. 然後會看到下面成功畫面

  • Android
  1. 執行 react-native run-android
* 發生錯誤狀況 找不到 android sdk 
  1. 處理方式,在 .bash_profile 中加入 ANDROID_HOME 的路徑  
  2. 因為我的 sdk 是使用 brew cask 安裝 所以 sdk 會放在 /user/local/Cellar 底下
  3. 如下: 
    export ANDROID_HOME=/usr/local/Cellar/android-sdk/24.3.3  
    export PATH=$ANDROID_HOME/platform-tools:$PATH  
    export PATH=$ANDROID_HOME/tools:$PATH  
* 發生錯誤 找不到 'android-23'
  1. 處理方式,更新 android sdk 
  2. 執行 `android update sdk --no-ui`
  3. 執行 `android update sdk -u -a`
* 發生錯誤 找不到 device 裝置
  1. 處理方式,安裝 `genymotion`
* What went wrong:
A problem occurred configuring project ':app'.
> failed to find Build Tools revision 23.0.1

  1. 處理方式
  http://stackoverflow.com/questions/27272605/failed-to-find-build-tools-revision-21-1-1-sdk-up-to-date
* ReactNative: Watcher took too long to load
1. 處理方式
  * watchman shutdown-server
  * brew update
  * brew reinstall watchman

設定 GenyMotion


開啟 模擬器後執行 react-native run-android

實機測試 遇到問題,
解決方式如下:
http://blog.yourtion.com/run-react-native-on-device.html

Comments

comments powered by Disqus