首先聲明爆惧,部分資料與圖片來自小碼哥隘弊,需要學(xué)習(xí)的朋友拱镐,文章最下面有鏈接,還望下載資料玉转。
————————————————————第一步————————————————
1.1安裝Homebrew
Homebrew是OS X的套件管理器突想,我們可以用它安裝很多插件、組件究抓。
Shell環(huán)境下執(zhí)行命令:
% ruby -e "$(curl -fsSLhttps://raw.githubusercontent.com/Homebrew/install/master/install)"
由于連接的是國外網(wǎng)站猾担,可能會(huì)執(zhí)行失敗,多試幾次就能安裝成功刺下。
驗(yàn)證安裝:
%?brew?-v
Homebrew?0.9.5?(git?revision?fb9a;?last?commit?2016-01-10)
1.2安裝npm和node.js
安裝完node.js默認(rèn)npm也有了
https://nodejs.org/en/download/
npm : 全稱是NodePackageManger绑嘹,是一個(gè)NodeJS包管理和分發(fā)工具,已經(jīng)成為了非官方的發(fā)布node模塊的標(biāo)準(zhǔn)
1.3 安裝WatchMan
該插件用于監(jiān)控bug文件和文件變化橘茉,并且可以出發(fā)指定的操作
安裝方式:brew install watchman
1.4安裝flow
flow是一個(gè)JS的靜態(tài)類型檢查器工腋,建議安裝,方便查找代碼中可能存在的類型錯(cuò)誤
安裝方式:brew install flow
——————————————————————第二步————————————————
2.1 安裝React Native
安裝方式 : npm install -g react-native-cli
若出現(xiàn) error rolling back則代表無權(quán)限操作畅卓,需在命令的前面加上 sudo 意味著獲取最高權(quán)限
2.2 iOS的環(huán)境需要做少iOS 7.0及以上
安卓的環(huán)境需求擅腰,Android Studio,需要安裝JDK翁潘,在進(jìn)行安裝Android Studio
安裝Genymotion模擬器
2.3 初始化項(xiàng)目
終端 cd 拖入創(chuàng)建的文件夾惕鼓,回車
react-native init 項(xiàng)目名稱(英文)/ ( like — ?react-native init XueYangRN )
如果初始化項(xiàng)目很慢,需要鏡像到國內(nèi)網(wǎng)站
npm config set registry https://registry.npm.taobao.org
npm config set registry https://npm.taobao.org/dist
2.54 運(yùn)行程序
在創(chuàng)建好的項(xiàng)目中唐础,打開iOS的Xcode文件箱歧,運(yùn)行矾飞。
安卓的項(xiàng)目運(yùn)行安卓的文件
2.5 文件編寫
打開WebStorm,打開創(chuàng)建的文件夾 例如(TuyueRN)
剛剛打開文件會(huì)有很多錯(cuò)誤呀邢,點(diǎn)擊右上角的Switch進(jìn)行加載JSX的語法
2.6.1管理react-native庫的版本
查看當(dāng)前的RN版本
命令行:react-native --version
通過打開項(xiàng)目中的package.json查看
2.6.2 更新本地RN的版本
命令行:npm update -g react-native-cli
npm : 全稱是NodePackageManger洒沦,是一個(gè)NodeJS包管理和分發(fā)工具,已經(jīng)成為了非官方的發(fā)布node模塊的標(biāo)準(zhǔn)
npm包地址
2.6.3 查看所有react-native版本信息
https://www.npmjs.com/package/react-native
命令行:npm info react-native
2.6.4 升級(jí)或降級(jí)npm包的版本
npm install ? --save react-native@0.18
2.6.5 更新項(xiàng)目temliates文件( 可選 )
新的npm包會(huì)包含更新在運(yùn)行react-native init命令生成的一些動(dòng)態(tài)文件价淌,通過命令行進(jìn)行查詢
react-native upgrade
2.7 WebStorm 設(shè)備 ReactNative 的代碼提示
從github上下載XML的插件
git clone https://github.com/virtoolswebplayer/ReactNative-LiveTemplate
安裝插件
將ReactNative.xml復(fù)制到 ~/Library/Preferences/WebStome10/templates
—————————————————篇外音----------------------------------------
JS真實(shí)名字叫ECMScript申眼,又叫JScript
從1998 2.0——ES6,但是大部在用ES5
------------------------------------------文件結(jié)構(gòu)截圖解析----------------------------------------
由于本人也是剛剛接觸RN蝉衣,小白一枚括尸,如有不對(duì)的地方還望多多指教,感謝各位病毡!
百度云的部分相關(guān)教程:鏈接: https://pan.baidu.com/s/1kUSued5 密碼: nuis
愿在RN的路上與各位大神并肩前行濒翻。