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