RN入門-01-環境搭建
環境搭建(作業系統Mac-10.13.4 )
一:軟體安裝
1.1 Homebred
Homebrew, Mac系統的包管理器,用於安裝NodeJS和一些其他必需的工具軟體。
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
譯註:在Max OS X 10.11(El Capitan)版本中,homebrew在安裝軟體時可能會碰到/usr/local
目錄不可寫的許可權問題。可以使用下面的命令修復:
1.2 Node 使用Homebrew來安裝Node.js. React Native目前需要NodeJS 5.0或更高版本。本文釋出時Homebrew預設安裝的是最新版本,一般都滿足要求。sudo chown -R 'whoami' /usr/local
brew install node
安裝完node後建議設定npm映象以加速後面的過程(或使用科學上網工具)。注意:不要使用cnpm!cnpm安裝的模組路徑比較奇怪,packager不能正常識別!
1.3 Yarn 、React Native的命令列工具(react-native-cli)npm config set registry https://registry.npm.taobao.org --global npm config set disturl https://npm.taobao.org/dist --global
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
EACCES: permission denied
這樣的許可權報錯,那麼請參照上文的homebrew譯註,修復/usr/local
目錄的所有權:sudo chown -R 'whoami' /usr/local
安裝完yarn之後就可以用yarn代替npm了,例如用yarn
代替npm install
命令,用yarn add 某第三方庫名
代替npm install --save 某第三方庫名
。Yarn常用命令
--------------至此RN開發環境搭建完成,接下來建立第一個RN應用程式HelloRNProject --------------
二 建立首個RN專案(Android)
2.1 在Documents下面使用如下命令建立一個HelloRNProject專案
react-native init HelloRNProject
執行上述命令之後會在workspace目錄下面:
- 新建了 HelloRNProject 資料夾
- 建立 package.json 檔案
- npm install --save react-native 執行
該命令
- 安裝了 react native 及其相關依賴.可以在 node-modules 目錄中找到.
- 在 package.json 中宣告 react native
- 安裝全域性的命令列工具(cli).並且將控制權交給本地的 cli(本地的 cli 在 node_modules/react-native/local-cli/cli.js 檔案)
- 建立 ios 和 android 工程檔案.
2.2 接下來執行剛才建立的RN專案(切換到RN專案根目錄執行如下指令)
react-native run-android
此時一個鮮紅的錯誤拋在眼前
Could not install the app on the device, read the error above for details.
Make sure you have an Android emulator running or a device connected and have
set up your Android development environment:
從字面上看就是連線不到模擬器或者是手機,或者環境變數未配置造成這種情況有很多原因。在github上找到解決方法:(從我的解決方式來看,是我的環境變數未配置)在RN專案的android目錄下建立一個local.properties檔案,並指定SDK的目錄
sdk.dir=/Users/xxxx/Library/Android/sdk (xxxx為你當前使用者名稱稱)
或者直接在以往正常Android專案根目錄下Copy一份 local.properties 檔案到 RN專案內android下面
再次執行
react-native run-android
等待編譯安裝,可見成功安裝
但是又有問題出現裝置上出現滿屏的紅幕,Unable to load script from assets "index.android.bundle" 吧啦吧啦。。。。
此種情況原因沒有找到assets下 "index.android.bundle"檔案,解決方案有兩種:
- 啟動RN服務線上測試 ,進入RN根目錄啟動服務
npm start
搖晃手機彈出RN對話方塊選擇Dev Setting 進入設定頁面 選擇Debug service host & port for device 設定與PC一致的IP,埠為8081,例如:192.168.2.2:8081,然後重新Reload即可(如果還不行使用方案二如下)
- 使用 React-native bundle 打出離線bundle包
進入RN專案的android目錄下面,在src/main下面建立assets目錄(使用者存放RN離線bundle包),在RN專案根目錄使用命令打出離線bundle包。
React-native bundle --entry-file index.js --bundle-output ./RN專案跟目錄下的Native module名稱/app/src/main/assets/index.android.bundle --platform android --assets-dest ./RN專案跟目錄下的Native module名稱/app/src/main/res/ --dev false
其中“RN專案跟目錄下的Native module名稱”替換為自己RN下面的Native名稱比如 案例裡面是 android執行之後編譯生成我們目標檔案
然後重新執行指令
react-native run-android
第一個HelloRNProject執行成功
參考文章 React Native中文網