跳到主要内容

快速上手

开发环境 macOS

  • 安卓必须安装的依赖有：Node、JDK 和 Android Studio。
  • 必须安装的依赖有：Node、Watchman、Xcode 和 CocoaPods。

Watchman 是由 Facebook 提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能（packager 可以快速捕捉文件的变化从而实现实时刷新）。 CocoaPods 是用 Ruby 编写的包管理器（相当于 node 中 npm 的角色）。

环境依赖处理​

brew install node # >= 18
brew install watchman
brew install cocoapods
brew install zulu@17
brew install --cask flipper # 调试工具

项目初始化​

当前使用版本为：react-native@npm:0.74.1

# 利用 npx 快速初始化项目
npx react-native init AwesomeProject

# 进入项目文件夹
cd AwesomeProject

# 运行项目
react-native start

# 启动 ios 项目
yarn ios
# 或者
react-native run-ios

# 安卓对应
yarn ios
# 或者
react-native run-android

# 检查环境问题
npx react-native doctor

安卓运行 options​

# react-native run-android [options]
# builds your app and starts it on a connected Android emulator or device

Options:

--install-debug
--root [string]           Override the root directory for the android build (which contains the android directory) (default: )
--flavor [string]         --flavor has been deprecated. Use --variant instead
--variant [string]
--appFolder [string]      Specify a different application folder name for the android source. (default: app)
--appId [string]          Specify an applicationId to launch after build. (default: )
--appIdSuffix [string]    Specify an applicationIdSuffix to launch after build. (default: )
--main-activity [string]  Name of the activity to start (default: MainActivity)
--deviceId [string]       builds your app and starts it on a specific device/simulator with the given device id (listed by running "adb devices" on the command line).
--no-packager             Do not launch packager while building
--port [number]            (default: 8081)
--config [string]         Path to the CLI configuration file
-h, --help                output usage information

安卓模拟器需要通过 Android Studio 先启动​

对于 macOS 或 Linux，您可以在 .bashrc、.zshrc 或其他相应的 shell 配置文件中添加以下行：

export PATH=$PATH:~/Library/Android/sdk/tools:~/Library/Android/sdk/platform-tools:~/Library/Android/sdk/emulator

# 然后记得source 对应的配置文件使其生效

常见操作：

# 列出所有连接的设备，包括模拟器
# List of devices attached 下如果没有显示数据，则表示没有可用的设备
adb devices

# 所有创建的模拟器配置，可以使用以下命令
android list avd

# 想查看特定模拟器的详细信息，可以使用
emulator -list-avds

# 手动启动模拟器（如果需要）：如果 run-android 命令无法启动模拟器，或者您想手动控制模拟器的启动，可以使用以下命令：
emulator -avd <Your_AVD_Name>

打包成 APK：

# 清空缓存
cd android && ./gradlew clean
# 编译打包成 APK
cd android && ./gradlew assembleRelease

生成的 APK 文件在 android/app/build/outputs/apk/release

IOS 运行 options​

# react-native run-ios [options]
# builds your app and starts it on iOS simulator

Options:

--simulator [string]      Explicitly set simulator to use. Optionally include iOS version betweenparenthesis at the end to match an exact version: "iPhone 6 (10.0)" (default: "iPhone X")
--configuration [string]  Explicitly set the scheme configuration to use
--scheme [string]         Explicitly set Xcode scheme to use
--project-path [string]   Path relative to project root where the Xcode project (.xcodeproj) lives. The default is 'ios'. (default: "ios")
--device [string]         Explicitly set device to use by name.  The value is not required if you have a single device connected.
--udid [string]           Explicitly set device to use by udid
--no-packager             Do not launch packager while building
--verbose                 Do not use xcpretty even if installed
--port [number]            (default: 8081)
--config [string]         Path to the CLI configuration file
-h, --help                output usage information

# Example usage:

# Run on a different simulator, e.g. iPhone 15:
react-native run-ios --simulator "iPhone 15"

# Pass a non-standard location of iOS directory:
react-native run-ios --project-path "./app/ios"

# Run on a connected device, e.g. Max's iPhone:
react-native run-ios --device "Max's iPhone"

# Run on the AppleTV simulator:
react-native run-ios --simulator "Apple TV"  --scheme "helloworld-tvOS"

# 发布 Release 版本
react-native run-ios --configuration Release
# pod 国内镜像 https://mirrors.tuna.tsinghua.edu.cn/help/CocoaPods/
# 进入iOS目录，安装iOS依赖
pod install
# 清空pod，如果pod相关有报错的话
pod cache clean --all

提示：每次有 npm 包变动的时候，都需要执行一次 pod install

你可以使用 --simulator 参数，在其后加上要使用的设备名称来指定要模拟的设备类型（目前默认为"iPhone 8"）。如果你要模拟 iPhone 11，那么这样运行命令即可：react-native run-ios --simulator "iPhone 11"。

你可以在终端中运行 xcrun simctl list devices 来查看具体可用的设备名称。

调试​

双击键盘 R 键，主动刷新页面​

react-devtools​

# 1、运行 react-devtools
npx react-devtools

# 2、模拟器上打开菜单
# iOS Simulator: Cmd ⌘ + D (or Device > Shake)
# Android emulators: Cmd ⌘ + M (macOS) or Ctrl + M (Windows and Linux)

# 3、Opening the Debugger

访问本机日志​

在终端中展示 console

# For Android:
npx react-native log-android
# Or, for iOS:
npx react-native log-ios
最后于 更新