React Native 開發(fā)常用命令

一似舵、環(huán)境搭建命令

必須安裝的依賴有:Node、Watchman 和 React Native 命令行工具以及 Xcode(iOS平臺需要)、Android Studio(Android平臺需要)叫乌。

1.安裝Node, Watchman

Watchman則是由 Facebook 提供的監(jiān)視文件系統(tǒng)變更的工具责静。安裝此工具可以提高開發(fā)時的性能(packager 可以快速捕捉文件的變化從而實現(xiàn)實時刷新)。

推薦使用Homebrew來安裝 Node 和 Watchman星虹。在命令行中執(zhí)行下列命令安裝:

brew install node
brew install watchman

安裝完 Node 后建議設(shè)置 npm 鏡像以加速后面的過程:

注意:不要使用 cnpm零抬!cnpm 安裝的模塊路徑比較奇怪,packager 不能正常識別宽涌!

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

2.安裝Yarn平夜、React Native 的命令行工具(react-native-cli)

Yarn是 Facebook 提供的替代 npm 的工具,可以加速 node 模塊的下載卸亮。React Native 的命令行工具用于執(zhí)行創(chuàng)建忽妒、初始化、更新項目兼贸、運行打包服務(wù)(packager)等任務(wù)段直。

安裝完 yarn 后同理也要設(shè)置鏡像源:

yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global

安裝完 yarn 之后就可以用 yarn 代替 npm 了,例如用yarn代替npm install命令溶诞,用yarn add 某第三方庫名代替npm install 某第三方庫名鸯檬。

安裝Xcode

可以通過 App Store 或是到Apple 開發(fā)者官網(wǎng)上下載。這一步驟會同時安裝 Xcode IDE很澄、Xcode 的命令行工具和 iOS 模擬器京闰。

安裝Android Studio

二、開發(fā)命令

1.創(chuàng)建新項目:

K痢u彘埂!注意Q镀选H痢!:init 命令默認(rèn)會創(chuàng)建最新的版本墨林,而目前最新的 0.45 及以上版本需要下載 boost 等幾個第三方庫編譯赁酝。這些庫在國內(nèi)即便翻墻也很難下載成功,導(dǎo)致很多人無法運行iOS項目P竦取W么簟!中文網(wǎng)在論壇中提供了這些庫的國內(nèi)下載鏈接搔耕。如果你嫌麻煩隙袁,又沒有對新版本的需求,那么可以暫時創(chuàng)建0.44.3的版本。

react-native init AwesomeProject

提示:你可以使用--version參數(shù)(注意是個杠)創(chuàng)建指定版本的項目菩收。例如react-native init MyApp --version 0.44.3梨睁。注意版本號必須精確到兩個小數(shù)點。

react-native init AwesomeProject --version 0.57.1

如果你是想把 React Native 集成到現(xiàn)有的原生項目中娜饵,則步驟完全不同坡贺,請參考集成到現(xiàn)有原生應(yīng)用

2.安裝/卸載依賴庫

  1)箱舞、npm install //重新安裝node_modules
  2)遍坟、npm install react-native-camera  //添加依賴:react-native-camera
  3)、npm uninstall react-native-camera //移除依賴庫(需要link的依賴褐缠,如果想進行移除政鼠,必須先進行unlink,然后才能進行移除操作)
  4)、react-native link //自動鏈接所有可以自動鏈接的依賴庫
  5)队魏、react-native link  react-native-camera //自動鏈接單個依賴:react-native-camera
  6)、react-native unlink react-native-camera  //自動斷開鏈接單個依賴:react-native-camera
  7)万搔、rm -rf node_modules  //移除node_modules

或使用yarn:

yarn add react-native-camera  //添加依賴:react-native-camera
yarn remove react-native-camera  //移除依賴庫: react-native-camera

3.模擬器運行命令

xcrun simctl list devices //查看具體可用的設(shè)備名稱
**iOS模擬器:**
react-native run-ios //目前默認(rèn)為"iPhone 6"
react-native run-ios --simulator "iPhone 7s" //使用--simulator參數(shù)胡桨,在其后加上要使用的設(shè)備名稱來指定要模擬的設(shè)備類型

Command? + R // 模擬器reload 界面
Command?+D //快速打開窗口模式 (可以點擊remote debug)
ctrl+alt+回車 //可以直接開啟chrome remote debug 模式
Command?+option + J(chrome)//chrome 彈出debug窗口模式,調(diào)試的具體日志

**Android:**
react-native run-android //模擬器(前提已開啟模擬器)
react-native run-android //真機(前提已usb鏈接真機)
R,R //連續(xù)點擊兩次R鍵瞬雹, 模擬器reload 界面
Command? + M //快捷鍵來快速打開Developer Menu

4.打包命令昧谊,iOS打包(iOS打包詳解戳這里)

npm run bundle-ios   //打包ios bundle

5.打包命令,android打包(Android打包詳情):

android打包bundle的配置:(下面兩種寫法都可以)方便起見我們也配置到package.json文件中:
ps: package.json 中配置的命名酗捌,都可以用npm run xxx-xxx進行觸發(fā)呢诬,比如配置好bundle打包命令后,執(zhí)行npm run bundle-android即可輸出bundle了

1."bundle-android": "node node_modules/react-native/local-cli/cli.js bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res"
2."bundle-android": "react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res",
//package.json中配置好bundle打包命令后胖缤,執(zhí)行:
npm run bundle-android//輸出bundle

//android打包apk命令:
cd android //進入到android項目目錄
./gradlew clean //先清除打包緩存
./gradlew assembleDebug //打debug環(huán)境apk
./gradlew assembleRelease //打release環(huán)境apk

6.其它Android命令:

adb devices //查看可用調(diào)試設(shè)備

adb install /Users/../build/outputs/apk/debug/app-debug.apk  //命令安裝apk到手機
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末尚镰,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子哪廓,更是在濱河造成了極大的恐慌狗唉,老刑警劉巖,帶你破解...
    沈念sama閱讀 206,126評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件涡真,死亡現(xiàn)場離奇詭異分俯,居然都是意外死亡,警方通過查閱死者的電腦和手機哆料,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,254評論 2 382
  • 文/潘曉璐 我一進店門缸剪,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人东亦,你說我怎么就攤上這事杏节。” “怎么了?”我有些...
    開封第一講書人閱讀 152,445評論 0 341
  • 文/不壞的土叔 我叫張陵拢锹,是天一觀的道長谣妻。 經(jīng)常有香客問我,道長卒稳,這世上最難降的妖魔是什么蹋半? 我笑而不...
    開封第一講書人閱讀 55,185評論 1 278
  • 正文 為了忘掉前任,我火速辦了婚禮充坑,結(jié)果婚禮上减江,老公的妹妹穿的比我還像新娘。我一直安慰自己捻爷,他們只是感情好辈灼,可當(dāng)我...
    茶點故事閱讀 64,178評論 5 371
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著也榄,像睡著了一般巡莹。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上甜紫,一...
    開封第一講書人閱讀 48,970評論 1 284
  • 那天降宅,我揣著相機與錄音,去河邊找鬼囚霸。 笑死腰根,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的拓型。 我是一名探鬼主播额嘿,決...
    沈念sama閱讀 38,276評論 3 399
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼劣挫!你這毒婦竟也來了册养?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 36,927評論 0 259
  • 序言:老撾萬榮一對情侶失蹤揣云,失蹤者是張志新(化名)和其女友劉穎捕儒,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體邓夕,經(jīng)...
    沈念sama閱讀 43,400評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡刘莹,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 35,883評論 2 323
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了焚刚。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片点弯。...
    茶點故事閱讀 37,997評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖矿咕,靈堂內(nèi)的尸體忽然破棺而出抢肛,到底是詐尸還是另有隱情狼钮,我是刑警寧澤,帶...
    沈念sama閱讀 33,646評論 4 322
  • 正文 年R本政府宣布捡絮,位于F島的核電站熬芜,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏福稳。R本人自食惡果不足惜涎拉,卻給世界環(huán)境...
    茶點故事閱讀 39,213評論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望的圆。 院中可真熱鬧鼓拧,春花似錦、人聲如沸越妈。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,204評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽梅掠。三九已至酌住,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間阎抒,已是汗流浹背赂韵。 一陣腳步聲響...
    開封第一講書人閱讀 31,423評論 1 260
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留挠蛉,地道東北人。 一個月前我還...
    沈念sama閱讀 45,423評論 2 352
  • 正文 我出身青樓肄满,卻偏偏與公主長得像谴古,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子稠歉,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 42,722評論 2 345

推薦閱讀更多精彩內(nèi)容