此內容根據徐贏老師的文檔整理后寫處
原版地址:https://tuomaxu.gitbooks.io/reactnative/content/
?
?
ReactNative是跨平開發的解決方案,在開發平臺的選擇上,mac平臺和win平臺都可以。
所需要工具如下:
1,Nodejs環境
2,create-react-native-app
3,Expo App
4,iPhone和安卓手機,或安卓手機模擬器(推薦使用夜神模擬器)
以上工具均有mac和win平臺的安裝包。
筆者使用的是mac平臺做開發,所有下面演示都以mac平臺進行。
?
?
安裝Nodejs環境
1,進入http://nodejs.cnnodejs中文網,下載與自身環境相一致的nodejs安裝包
2,安裝包下載之后,雙擊進行安裝
win平臺的同學注意,安裝過程中要關閉殺毒軟件和各種安全工具
3,安裝完成之后,打開命令行工具,檢查是否安裝成功,執行如下命令:
$ node -v
該命令執行結果為當前node版本,筆者當前版本為:
v6.9.1
4,檢查NPM是否安裝成功,
npm 是Node包管理工具,之后需要使用它來安裝其他node程序包
在在命令行中輸入如下命令:
$ npm -v
該命令執行結果為:
4.5.0
?
?
安裝Yarn
Yarn是Facebook出品的一個依賴包管理工具,起作用和npm一樣。但Yarn具有更多好用的特性:
-
Yarn 會緩存它下載的每個包,所以不需要重復下載。它還能并行化操作以最大化資源利用率,所以安裝速度之快前所未有
-
Yarn 在每個安裝包的代碼執行前使用校驗碼驗證包的完整性。
-
Yarn 使用一個格式詳盡但簡潔的 lockfile 和一個精確的算法來安裝,能夠保證在一個系統上的運行的安裝過程也會以同樣的方式運行在其他系統上
-
網絡適應單個請求失敗不會導致安裝失敗,請求失敗時會重試。
安裝yarn
訪問Yarn官網,下載響應平臺的安裝包,進行安裝
使用Yarn
安裝好之后,其他工具會自動使用Yarn進行加速。
?
安裝create-react-native-app命令行工具
create-react-native-app是一個綜合創建ReactNative工程,并且不需要配置的工具,它極大的簡化了入門開發的流程。具體的內容,大家可以進入其github.com的主頁進行瀏覽。
安裝create-react-native-app需要使用npm進行,在任意目錄下,輸入如下命令,便可以在該目錄下創建一個ReactNative工程。
$ npm install -g create-react-native-app
安裝成功之后,會展示安裝路徑。如安裝不成功,請檢查網絡,重新安裝。
?
創建ReactNative工程
ReactNative工程的模板需要通過create-react-native-app工具進行創建。創建方法如下:
1,通過命令行進入存放ReactNative工程的文件夾。
2,在該文件夾下執行如下命令:
$ create-react-native-app myapp
myapp為工程名,可以更換為其他字符,但必須小寫
安裝過程需要1-5分鐘不等,如想提升安裝速度,可以安裝yarn,詳情見yarn官網
下面為筆者安裝成功截圖:
筆者使用了yarn進行提速,所有命令中顯示為yarn
?
?
運行預覽工程
1,工程創建完成之后,便可以啟動工程,開始開發和調試。
啟動工程,首先要使用命令行工具進入工程更目錄,然后運行如下指令
$ npm start
工程 啟動之后,會生成一個二維碼和一個本地鏈接,通過此此二維碼或本地鏈接,便可預覽工程運行效果。
2,啟動工程之后,需要在手機端安裝Expo App,使用Expo App對所開發的ReactNative App進行預覽運行。
安裝ExpoApp的方法如下:
iOS平臺:在AppStore中搜索Expo client,如圖
Android平臺下,訪問此鏈接:http://expo.io/--/api/v2/versions/download-android-apk?下載安裝包并安裝,安裝過程中需要給此App全部權限。
3,Expo App在手機端安裝完成之后,打開ExpoApp,通過其掃描二維碼的功能,掃描生成的二維碼,便可以在App內預覽開發中的App工程
4,新建工程的運行效果為: