React Native 開發第一節記錄

• 搭建開發環境

1.1 安裝 Homebrew https://brew.sh 開啟終端輸入 貼上

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

 然後回車鍵，自動下載完成。

1.2 使用Homebrew來安裝 Node 和 Watchman

brew install node
brew install watchman

如果你已經安裝了 Node，請檢查其版本是否在 v8.3 以上。安裝完 Node 後建議設定 npm 映象以加速後面的過程

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

Watchman則是由 Facebook 提供的監視檔案系統變更的工具。安裝此工具可以提高開發時的效能

1.3 Yarn、React Native 的命令列工具（react-native-cli）

Yarn是 Facebook 提供的替代 npm 的工具，可以加速 node 模組的下載。React Native 的命令列工具用於執行建立、初始化、更新專案、執行打包服務（packager）等任務。

npm install -g yarn react-native-cli

安裝完 yarn 後同理也要設定映象源：

yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global

安裝完 yarn 之後就可以用 yarn 代替 npm 了，例如用yarn代替npm install命令，用yarn add 某第三方庫名代替npm install 某第三方庫名。

2.0 建立專案AwesomeProject

react-native init AwesomeProject

執行專案 ios

cd AwesomeProject
react-native run-ios

執行專案 android

cd AwesomeProject
react-native run-android

執行的時候出現一個坑：

坑一：
The development server returned response error code: 500

解決方法：

react-native start --reset-cache 
adb reverse tcp:8081 tcp:8081
cd AwesomeProject
react-native run-android

坑二：
unable to load script from assets ‘index.android bundle’ ,make sure your bundle is packaged correctly or youu’re runing a packager server

解決方法：

1. 新建assets

進入\android\app\src\main 
新建assets資料夾 

2. 進入根目錄cmd執行命令：

react-native bundle --platform android --dev false --entry-file
index.js --bundle-output
android/app/src/main/assets/index.android.bundle --assets-dest
android/app/src/main/res 

3. 執行run-android