1. 程式人生 > >RN入門-01-環境搭建

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目錄不可寫的許可權問題。可以使用下面的命令修復:
sudo chown -R 'whoami' /usr/local
1.2  Node 使用Homebrew來安裝Node.jsReact Native目前需要NodeJS 5.0或更高版本。本文釋出時Homebrew預設安裝的是最新版本,一般都滿足要求。
brew install node
安裝完node後建議設定npm映象以加速後面的過程(或使用科學上網工具)。注意:不要使用cnpm!cnpm安裝的模組路徑比較奇怪,packager不能正常識別!
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
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
如果你看到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中文網