一似舵、環(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到手機