1. 程式人生 > >React-Native探索之路(一)

React-Native探索之路(一)

對於技術小白的我來說,一聽說React-Native,頓時瑟瑟發抖,虎軀一震,菊花一緊,頓時心生畏懼,總覺得React-Native和我隔著千山萬嶺,但是出於好奇,並且對於熱愛學(zhuang)習(bi)的我來說,決定從零開始摸索這門技術,為了防止之後會遺忘,所以還是以筆記的形式記錄一下。
好了,廢話不多說了,一起來開啟這段學(zhuang)習(bi)的旅程

什麼是React-Native?

為什麼用React-Native?

1、傳統開發的痛點

開發成本高(一個公司要同時招聘安卓和IOS開發者)
程式碼複用率比較低(開發IOS和安卓的語言不想通)

2、React-Native的優點

跨平臺
低投入、高回報
效能高
支援動態更新
其他

開發環境搭建

Node.js、Python 2、React-Native命令列工具、AndroidStudio(安卓)\XCode(IOS)

1、在Windows平臺搭建開發環境

這裡寫圖片描述

下載Node.js並安裝,輸入npm -v檢視node.js版本

這裡寫圖片描述

建議配置Node環境變數path

這裡寫圖片描述

Yarn、React Native的命令列工具(react-native-cli)

這裡寫圖片描述

安裝AndroidStudio(不做過多介紹),有三個東西必須要裝

這裡寫圖片描述

這裡寫圖片描述

這裡寫圖片描述

配置ANDROID_HOME環境變數(依照官網給的截圖)

將Android SDK的Tools目錄新增到PATH變數中

這裡寫圖片描述

這裡寫圖片描述

測試安裝

這裡寫圖片描述

安裝完成目錄結構:

這裡寫圖片描述

node_modules:通過npm install 安裝的東西都會放在這個目錄下

package.json:配置工程的依賴

果然不出所料,執行出錯(用命令列啟動安卓應用)

這裡寫圖片描述

我找到對應的資料夾直接幹掉,然後再執行一次,之後會自動下載,最後完美執行在真機上了(如果遇到其他坑,請自行百度谷歌,小弟就不幫忙啦)

這裡寫圖片描述

除了用命令列開啟安卓工程外,還可以啟動AndroidStudio開啟這個安卓工程

2、在Mac平臺搭建開發環境

由於小白沒有Mac,所以此處內容以後會新增

開發React-Native工具的選擇

1、WebStorm
2、Nuclide+Watchman(Mac)
3、Sublime