React Native 使用JavaScript語言編寫跨平臺的iOS與Android原生App棍厂。
http://reactnative.cn
學(xué)習(xí)地址。
本人是一名資深的iOS開發(fā)人員舔亭,所以本文只做Mac環(huán)境下的React Native的框架的搭建。
一. 安裝 Homebrew
Homebrew, Mac系統(tǒng)的包管理器蟀俊,用于安裝NodeJS和一些其他必需的工具軟件钦铺。
終端輸入一下命令如果
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
如果在Mac中遇到文件夾權(quán)限的問題,則輸入以下命令:
sudo chown -R `whoami` /usr/local
二. 安裝Node
React Native需要NodeJS 4.0或更高版本肢预。本文發(fā)布時Homebrew默認(rèn)安裝的是6.x版本矛洞,完全滿足要求。
brew install node
三. React Native的命令工具(react-native-cli)
React Native的命令行工具用于執(zhí)行創(chuàng)建误甚、初始化缚甩、更新項(xiàng)目谱净、運(yùn)行打包服務(wù)(packager)等任務(wù)窑邦。
npm install -g react-native-cli
如果你看到EACCES: permission denied
這樣的權(quán)限報錯擅威,那么請參照上文的homebrew譯注,修復(fù)/usr/local
目錄的所有權(quán):
sudo chown -R `whoami` /usr/local
四. 測試React-Native環(huán)境的安裝
在終端依次輸入以下語句(選擇一個固定的文件夾進(jìn)入)
創(chuàng)建了一個TestDemo的工程文件夾冈钦。
react-native init TestDemo
進(jìn)入TestDemo
cd TestDemo
通過模擬器來運(yùn)行React-Native工程的App
react-native run-ios
react-native run-android
五. 修改并且編輯React-Native工程的項(xiàng)目
進(jìn)入ios文件夾中郊丛,點(diǎn)擊進(jìn)入修改index.ios.js文件進(jìn)行修改,點(diǎn)開模擬器瞧筛,使用command+R進(jìn)行運(yùn)行可以查看到結(jié)果厉熟。
六. 模擬器運(yùn)行填坑指南
在Mac電腦上前往RN工程根目錄下,輸入運(yùn)行的iOS命令较幌,是可以直接運(yùn)行在iPhone 6的模擬器上的揍瑟。而輸入運(yùn)行在安卓模擬器上的命令的話,會進(jìn)行報錯的處理乍炉。此處解決的辦法是绢片,找到RN根目錄下的此文件工程包,如下圖所示:
Android工程
將此目錄使用Android Studio打開進(jìn)行相應(yīng)的配置岛琼,完后進(jìn)行完后使用運(yùn)行到模擬器上底循。此處我用的是Genymotion的模擬器。
Genymotion運(yùn)行RN
iPhone Simulator運(yùn)行RN
開發(fā)建議:
iPhone槐瑞,Android模擬器中運(yùn)行RN后打開熱刷新熙涤,可以加快開發(fā)效率。
按鍵選擇如下:
Android: command + M
iOS: command + D