React Native 开发常用命令

一、环境搭建命令

必须安装的依赖有:Node、Watchman 和 React Native 命令行工具以及 Xcode(iOS平台需要)、Android Studio(Android平台需要)。

1.安装Node, Watchman

Watchman则是由 Facebook 提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能(packager 可以快速捕捉文件的变化从而实现实时刷新)。

推荐使用Homebrew来安装 Node 和 Watchman。在命令行中执行下列命令安装:

brew install node
brew install watchman

安装完 Node 后建议设置 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 的命令行工具用于执行创建、初始化、更新项目、运行打包服务(packager)等任务。

安装完 yarn 后同理也要设置镜像源:

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 开发者官网上下载。这一步骤会同时安装 Xcode IDE、Xcode 的命令行工具和 iOS 模拟器。

安装Android Studio

二、开发命令

1.创建新项目:

!!!注意!!!:init 命令默认会创建最新的版本,而目前最新的 0.45 及以上版本需要下载 boost 等几个第三方库编译。这些库在国内即便翻墙也很难下载成功,导致很多人无法运行iOS项目!!!中文网在论坛中提供了这些库的国内下载链接。如果你嫌麻烦,又没有对新版本的需求,那么可以暂时创建0.44.3的版本。

react-native init AwesomeProject

提示:你可以使用--version参数(注意是个杠)创建指定版本的项目。例如react-native init MyApp --version 0.44.3。注意版本号必须精确到两个小数点。

react-native init AwesomeProject --version 0.57.1

如果你是想把 React Native 集成到现有的原生项目中,则步骤完全不同,请参考集成到现有原生应用

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 //查看具体可用的设备名称
**iOS模拟器:**
react-native run-ios //目前默认为"iPhone 6"
react-native run-ios --simulator "iPhone 7s" //使用--simulator参数,在其后加上要使用的设备名称来指定要模拟的设备类型

Command⌘ + R // 模拟器reload 界面
Command⌘+D //快速打开窗口模式 (可以点击remote debug)
ctrl+alt+回车 //可以直接开启chrome remote debug 模式
Command⌘+option + J(chrome)//chrome 弹出debug窗口模式,调试的具体日志

**Android:**
react-native run-android //模拟器(前提已开启模拟器)
react-native run-android //真机(前提已usb链接真机)
R,R //连续点击两次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进行触发,比如配置好bundle打包命令后,执行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打包命令后,执行:
npm run bundle-android//输出bundle

//android打包apk命令:
cd android //进入到android项目目录
./gradlew clean //先清除打包缓存
./gradlew assembleDebug //打debug环境apk
./gradlew assembleRelease //打release环境apk

6.其它Android命令:

adb devices //查看可用调试设备

adb install /Users/../build/outputs/apk/debug/app-debug.apk  //命令安装apk到手机

推荐阅读更多精彩内容