Reacet-Native學(xué)習(xí)筆記以及demo在github的地址
開篇
簡(jiǎn)介
Reacet Native 是facebook公司推出的一款能夠跨平臺(tái)開發(fā)的框架,其能夠使用js來(lái)達(dá)到安卓端和iOS端共用一套代碼開發(fā)的目的.Reacet Native 的核心設(shè)計(jì)理念是:即擁有Reacet的開發(fā)效率,又能擁有Native的用戶體驗(yàn).
開發(fā)前注意
iOS目前支持7.0以上版本,Android支持4.1以上版本
開發(fā)環(huán)境配置
環(huán)境需求
- 安裝Homebrew
在終端中輸入下面的命令,執(zhí)行的速度可能比較慢,請(qǐng)耐心等待其執(zhí)行完成
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
在終端中輸入下面的命令驗(yàn)證是否安裝成功
brew -v
- 安裝npm和Node.js
下載地址,下載完成后請(qǐng)手動(dòng)運(yùn)行安裝,建議使用4.4.4版本
- 安裝watchMan
該插件用于監(jiān)控bug文件和文件變化 ，并且可以觸發(fā)指定的操作,在終端中輸入下面的命令就可以了
brew install watchman
- 安裝Flow
flow是一個(gè) JavaScript 的靜態(tài)類型檢查器，建議安裝它，以方便找出代碼中可能存在的類型錯(cuò)誤,在終端輸入下面的代碼,如果提示command not found,請(qǐng)加上sudo獲得最高權(quán)限
brew install flow
React Native安裝
在終端輸入
npm install -g react-native-cli
至此Reacet Native的環(huán)境就已經(jīng)全部安裝好了
創(chuàng)建Reacet Native項(xiàng)目
在終端中輸入下面命令
react-native init 項(xiàng)目名稱
如果速度較慢,可以將npm倉(cāng)庫(kù)源替換為國(guó)內(nèi)鏡像:
npm config set registry https://registry.npm.taobao.org
npm config set disturl https://npm.taobao.org/dist
默認(rèn)生成了三個(gè)文件夾,android和ios(iOS)為兩個(gè)平臺(tái)的原生項(xiàng)目,index.android.js和index.ios.js為android和ios平臺(tái)下的空殼應(yīng)用文件,我們的代碼一般就寫在這兩個(gè)文件內(nèi),客戶端那邊不用重新run就可以看到效果,node_modules文件夾主要是存放框架資源.
對(duì)index.ios.js文件的編寫軟件以及提示插件的安裝
我們采用的是WebStorm來(lái)對(duì)js文件來(lái)進(jìn)行編寫,由于直接編寫并沒有代碼提示,所以這里要安裝一個(gè)插件,下載地址,下載完成后file -> import settings -> ReactNative.jar ,完成之后就可以像Xcode那樣能夠自動(dòng)提示了.
