基本概念(
問(wèn)渠那得清如許，為有源頭活水來(lái)。雙手奉上RN官網(wǎng))
react
|—react.js(web端js框架,react概念由此產(chǎn)生)
|—reactNative(react衍生)
環(huán)境配置
iOS僅支持Mac,Android支持Mac & Windows & Linux職業(yè)開(kāi)發(fā)建議選購(gòu)MBP(Macbook Pro, 建議在第一年質(zhì)?？旖Y(jié)束時(shí)購(gòu)買(mǎi)care+,否則維修成本較高)
iOS + Mac
- 依賴(lài)于Xcode,node.js, ReactNative commandLine, watchman
* 安裝Xcode
* 安裝Homebrew(macOS包管理工具) : `/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"`
* 安裝node: brew install node
* 安裝watchman: brew install watchman
* 安裝RN命令行(cli指command line interface) : sudo npm install -g react-native-cli
- 示例項(xiàng)目:
* 進(jìn)入要?jiǎng)?chuàng)建項(xiàng)目的目錄: cd [parentDir]
* 創(chuàng)建項(xiàng)目,這個(gè)過(guò)程會(huì)下載一系列依賴(lài)文件,耗時(shí)較長(zhǎng)(20min+,因?yàn)榉阑痖L(zhǎng)城的問(wèn)題,唉??): react-native init [projectName]
曲線解決方案,用淘寶的鏡像.
編輯 ~/.npmrc 加入下面內(nèi)容
registry = https://registry.npm.taobao.org
* 進(jìn)入項(xiàng)目文件中: cd [projectName]
* 運(yùn)行項(xiàng)目: react-native run-ios
- 編輯項(xiàng)目:
* 在index.ios.js中編輯
* 選中模擬器時(shí)cmd+R重載應(yīng)用(如果無(wú)效,需要在hardware->keyboard中勾選Connect Hardware Keyboard)
* 選中模擬器時(shí)cmd+D顯示開(kāi)發(fā)菜單
開(kāi)發(fā)菜單中的項(xiàng)目說(shuō)明
Reload: 重新加載
Debug JS Remotely : 在瀏覽器里調(diào)試代碼
Disable Live Reload : 是否在文件修改完成時(shí)自動(dòng)重載
Start Systrace: 監(jiān)控應(yīng)用在一段時(shí)間內(nèi)的指標(biāo)信息
Enable Hot Reloading : 熱更新.保留應(yīng)用原有狀態(tài)的情況下重載.
Show Inspector : 貌似是結(jié)合瀏覽器查看調(diào)試的(待確認(rèn))
Show perf(performance) Monitor: 顯示性能監(jiān)控
Android+Mac(已可用,尚有部分槽點(diǎn)未處理完)
- 依賴(lài)于Android studio,node.js, ReactNative commandLine, watchman
* Android studio自己下載安裝,其他同上
* 選擇custom安裝
* 勾選Performance和Android Virtual Device
* 在Android Studio的啟動(dòng)歡迎界面中選擇Configure | SDK Manager
* 在SDK Platforms窗口中，選擇Show Package Details，然后在Android 6.0 (Marshmallow)中勾選Google APIs、Intel x86 Atom System Image、Intel x86 Atom_64 System Image以及Google APIs Intel x86 Atom_64 System Image。
* 在SDK Tools窗口中，選擇Show Package Details，然后在Android SDK Build Tools中勾選Android SDK Build-Tools 23.0.1。（必須是這個(gè)版本）
* ANDROID_HOME環(huán)境變量配置
* 使用vim(新建)編輯`~/.bashrc`文件,加入以下內(nèi)容
export ANDROID_HOME=~/Library/Android/sdk
export PATH=${PATH}:${ANDROID_HOME}/tools
- 示例項(xiàng)目:
* 與ios基本相同,只是運(yùn)行時(shí)使用 react-native run-android 命令,但運(yùn)行前要先打開(kāi)一個(gè)Android虛擬機(jī)
* 命令運(yùn)行完后發(fā)現(xiàn)安裝成功了,但沒(méi)有自動(dòng)運(yùn)行,需要手動(dòng)點(diǎn)擊進(jìn)入
* 刷新時(shí)需要使用cmd+M調(diào)出菜單手動(dòng)刷新
- 編輯項(xiàng)目:
* 在index.android.js中編輯
iOS + Windows(不支持)
Android + Windows(待補(bǔ)充)
iOS + Linux(不支持)
Android + Linux(待補(bǔ)充)
