解决环境配置问题，开启我的 React Native 学习之旅❗️如何初始化一个 react-native 项目？本文介

配置 PATH

配置 ~/.zprofile

# Android
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools

# Java
export JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk-11.jdk/Contents/Home
export PATH=$JAVA_HOME/bin:$PATH

终端执行 ~/.zprofile 使配置生效。

查看安装的 Java sdk 所在位置：

/Library/Java/JavaVirtualMachines/jdk-11.jdk/Contents/Home

# 执行以下命令可看
/usr/libexec/java_home -V

# 输入以上命令，得到以下信息：
Matching Java Virtual Machines (1):
    11.0.24 (x86_64) "Oracle Corporation" - "Java SE 11.0.24" /Library/Java/JavaVirtualMachines/jdk-11.jdk/Contents/Home
/Library/Java/JavaVirtualMachines/jdk-11.jdk/Contents/Home

配置 gradle version 为指向安装的 sdk

Android Studio->Settings | Build, Execution, Deployment | Build Tools | Gradle

安装 android sdk 相关工具

Settings | Languages & Frameworks | Android SDK

platform

tools

初始化项目

创建项目

npx @react-native-community/cli@6.3.0 init demo3 --version 0.72.3

PS：指定版本：

@react-native-community/cli@6.3.0
react-native@0.72.3

网速慢：

# 设置淘宝镜像
npm config set registry https://registry.npmmirror.com

安装js依赖

cd demo5
npm i

原生端构建

创建模拟器

创建了AVD之后，再输入 adb devices 就可以看到设备是否连接。

启动 RN 项目

cd demo5
npm run android

最终显示这样的界面说明启动成功❗️

adb

adb devices 是一个 Android Debug Bridge (ADB) 命令，主要用途是：

列出所有连接到电脑的 Android 设备（包括真机和模拟器）
显示每个设备的状态

输出格式通常是这样的：

List of devices attached
emulator-5554    device      # 这是一个模拟器
XXXXXXXX         device      # 这是一个真实设备的序列号

设备状态可能显示为：

-   device: 设备已连接且可用

-   offline: 设备已连接但不可用

-   unauthorized: 设备未授权 ADB 连接

-   bootloader: 设备处于 bootloader 模式

-   recovery: 设备处于 recovery 模式

常见用途：

开发调试前检查设备是否正确连接
确认模拟器是否正常运行
在有多个设备时确认目标设备
排查设备连接问题

相关的实用命令：

# 启动 adb 服务器
adb start-server

# 停止 adb 服务器
adb kill-server

# 重启 adb 服务器（解决连接问题时常用）
adb kill-server && adb start-server

# 连接特定设备（当有多个设备时）
adb -s <device-id> <command>

adb reverse 是一个用于端口转发的 ADB 命令，主要用于 React Native 开发中将手机设备的端口映射到电脑端口。最常见的用法是：

# 基本语法
adb reverse tcp:<手机端口> tcp:<电脑端口>

# React Native 开发中最常用的命令
adb reverse tcp:8081 tcp:8081  # 用于 Metro bundler

常见使用场景：

# Metro bundler 端口转发
adb reverse tcp:8081 tcp:8081

# 调试端口转发
adb reverse tcp:8097 tcp:8097  # React Native Debugger
adb reverse tcp:9090 tcp:9090  # Chrome 调试

# 列出所有转发
adb reverse --list

# 删除特定端口转发
adb reverse --remove tcp:8081

# 删除所有转发
adb reverse --remove-all

adb shell 是一个非常强大的命令，它允许你通过终端直接访问 Android 设备的 shell 环境。相当于在设备上打开了一个命令行界面。

常用的 adb shell 命令：

# 进入交互式 shell
adb shell

# 查看已安装的应用包列表
adb shell pm list packages

# 查看指定包名的应用信息
adb shell dumpsys package com.your.app

# 清除应用数据
adb shell pm clear com.your.app

# 强制停止应用
adb shell am force-stop com.your.app

# 查看设备属性
adb shell getprop

# 查看日志
adb shell logcat

# 查看设备存储空间
adb shell df

# 查看设备内存使用情况
adb shell dumpsys meminfo

# 截图
adb shell screencap /sdcard/screen.png

# 录屏
adb shell screenrecord /sdcard/video.mp4

在 React Native 开发中特别有用的命令：

# 查看应用日志
adb shell logcat | grep -i react

# 检查 Metro bundler 端口是否正常
adb shell netstat | grep 8081

# 查看应用崩溃日志
adb shell dumpsys dropbox | grep crash

# 清除 React Native 应用数据（调试用）
adb shell pm clear com.your.app.debug

adb push 是用来将文件或目录从电脑复制到 Android 设备的命令。

adb push <本地路径> <设备路径>

# 推送单个文件
adb push test.txt /sdcard/

# 推送整个目录
adb push ./my_folder /sdcard/my_folder

# 指定设备推送（当连接多个设备时）
adb -s <device-id> push test.txt /sdcard/

# 推送并显示详细信息
adb push -p test.txt /sdcard/

adb pull 是从 Android 设备复制文件或目录到电脑的命令，与 adb push 的作用相反。

adb pull <设备路径> <本地路径>

# 拉取单个文件到当前目录
adb pull /sdcard/screenshot.png .

# 指定本地保存路径
adb pull /sdcard/DCIM/Camera/photo.jpg ~/Pictures/

# 拉取整个目录
adb pull /sdcard/Download ./my_downloads

# 指定设备拉取（当连接多个设备时）
adb -s <device-id> pull /sdcard/log.txt .

# 显示详细传输信息
adb pull -p /sdcard/video.mp4 .

解决环境配置问题，开启我的 React Native 学习之旅❗️

相关工具安装

安装 java sdk11

安装 Android Studio