使用直接在 Windows 中运行的模拟器在 WSL 中运行 React Native

Question

我有一段时间没有做 Android 开发了，所以我对现代 Android 开发的了解参差不齐。

我正在尝试学习 React Native。我使用 WSL 作为我的主要开发环境。由于在 Linux/WSL 中设置 Android 模拟器可能会很痛苦，我想直接在 Windows 上运行模拟器。不过，我更希望能够在 WSL 中运行 react-native run-android。

如何设置 React Native 以便能够在 WSL 中运行 react-native run-android 并在 Windows 上的 Android 模拟器中运行应用程序？

我的 ANDROID_HOME 变量应该设置正确，但我对 Android 的了解还不够，无法知道这是否在做任何事情：

export ANDROID_HOME=/mnt/c/Users/Leo/AppData/Local/Android/sdk
export PATH=${PATH}:${ANDROID_HOME}/tools
export PATH=${PATH}:${ANDROID_HOME}/platform-tools

Answer 1

AFAIK 由于许多问题，无法在 WSL 中使用 react-native。

例如https://github.com/Microsoft/BashOnWindows/issues/1523

但是，我找到了一种解决方法，它将原生 windows android 构建与 WSL 中的 npm 堆栈相结合。实际上，无论如何，您都需要安装本机 Windows Android Studio/SDK 以使用 Intellij IDE 和模拟器。诀窍是分离出基于 Gradle 的 Android 编译。

工作流程

在 WSL 中使用 npm/yarn 执行所有项目设置和包管理。在 WSL 中全局安装的 react-native-cli。不需要重复的 windows 二进制节点/npm 堆栈。

不要使用react-native run-android，而是从 cmd 编译和部署。从项目中的 /android 目录，执行 gradle 包装器 gradlew.bat installDebug，或者使用 Creator 的更新，您可以在 WSL bash shell /mnt/c/Windows/System32/cmd.exe /C gradlew.bat installDebug 中执行此操作。不要使用 unix gradlew 脚本。

组装好 APK 并上传到您的设备或模拟器后，使用命令 react-native start 从 WSL 中运行调试服务器。

我已经使用多个原生 Android 组件对一些相当复杂的项目进行了测试。希望这会有所帮助。

• 注意：要使此功能正常工作，您的项目需要位于本机 Windows 文件系统中，即 /mnt/c。

Answer 2

可以进行设置，使模拟器在 Windows 中运行，同时在 WSL 中运行 react-native run-android。与@pscl 的方式相比，这样做的好处是这种方式支持自动链接。以下是您需要执行的操作。

窗口

Windows 端唯一需要的就是安装Android Studio 并设置模拟器/虚拟设备。这很简单，所以我不会引导您完成。

适用于 Linux 的 Windows 子系统

这方面的设置还有很多，请耐心等待。 （我的 WSL 是 Ubuntu 18.04，这在其他版本上未经测试。）

1. 下载并解压 Android 命令行工具。 （目前在 Android Studio 下载页面上找到，向下滚动到“仅限命令行工具”并选择 Linux 下载选项。）
2. 查看解压后的文件夹并将名为tools 的目录移动到~/Android/Sdk/tools。 （如果 ~/Android/Sdk 目录不存在，则创建它们。）
3. 下载并解压缩JDK 8。（我建议从AdoptOpenJDK下载。另外，请确保安装OpenJDK 8，否则sdkmanager将无法工作，我们稍后会使用它。）
4. 将解压后的文件夹移至/opt/jdk8u222-b10。 （实际上你可以把它放在任何你想要的地方，只要确保 JAVA_HOME 环境变量指向这个解压缩的文件夹。）
5. 在~/.bashrc 文件中设置以下环境变量。 （您的路径可能会有所不同！）

export ANDROID_HOME=/home/your-name/Android/Sdk
export JAVA_HOME=/opt/jdk8u222-b10
export PATH=$PATH:$ANDROID_HOME/platform-tools
export PATH=$PATH:$ANDROID_HOME/tools/bin

6. 重启 bash 终端并执行命令sdkmanager "platform-tools" 以下载最新的平台工具。 （adb 工具来自这里。）

反应原生

现在一切都设置好了，是时候开始玩了！

1. 在 Windows 中启动模拟器。
2. 在 WSL 中打开您的项目目录并运行 react-native start。 （保持此终端打开）。
3. 在另一个 WSL 终端中打开您的项目目录并运行 react-native run-android。 （第一次运行时，React Native 会根据您的虚拟设备下载一些其他 SDK。您可以通过运行 sdkmanager --list 查看所有已安装的 SDK。有关详细信息，请参阅 docs for sdkmanager。）

在设备上运行

这是有关制作它的快速说明，以便您可以将应用安装到物理设备上。这里的诀窍是确保您的两个adb 可执行文件在同一版本上。 （应该是因为我们是通过sdkmanager安装的。）

C:\Users\your-name\AppData\Local\Android\Sdk\platform-tools\adb.exe version

/home/your-name/Android/Sdk/platform-tools/adb version

确认它们在同一版本上后，请确保从 Windows 可执行文件（运行 adb.exe kill-server && adb.exe start-server）启动 adb 服务器。然后您可以通过在 WSL 中运行 adb devices 来测试它是否有效，您应该会看到您的设备已插入。

Answer 3

对于那些努力使 Windows 10 Android Studio 与位于 WSL2 的 react-native 项目一起工作的人。

初始设置

您需要在 Windows 10 Android Studio 上安装。

设置用户变量： ANDROID_HOME=C:\Users\<YOUR_USER>\AppData\Local\Android\Sdk

添加到系统变量PATH： %ANDROID_HOME%\emulator %ANDROID_HOME%\platform-tools %ANDROID_HOME%\tools %ANDROID_HOME%\cmdline-tools\latest (I'm not sure if this one is necessary)

然后转到您的 WSL2 并安装：

1. sudo apt-get install unzip
2. 仅获取 android studio 命令行工具并将其解压缩到 /home//Android
3. 用sudo apt-get install openjdk-8-jdk安装jdk 8
4. 将此添加到您的 .bashrc：

export JAVA_HOME=/usr/lib/jvm/java-8-openjdk-amd64
export JRE_HOME=/usr/lib/jvm/java-8-openjdk-amd64/jre
export PATH=$PATH:$JAVA_HOME/bin

export ADB_SERVER_SOCKET=tcp:<YOUR_WSL_IP_ADDRESS_FROM_POWERSHELL>:5037 (check your WSL adapter IP by running `ipconfig` in powershell.)

export ANDROID_HOME=$HOME/Android
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

5. 重启 bash 并运行 sdkmanager --sdk_root=${ANDROID_HOME} "platform-tools"
6. 运行adb version && adb.exe version检查版本是否匹配

---

在模拟器上运行

1. 运行 adb kill-server (ps) / adb.exe kill-server (wsl2 bash)
2. 运行adb -a -P 5037 nodaemon server (ps) / adb.exe -a -P 5037 nodeamon server (wsl2 bash) - 不要关闭终端窗口！
3. 运行emulator -avd <YOUR_AVD_NAME> (ps) / emulator.exe -avd <YOUR_AVD_NAME> - 不要关闭终端窗口！
4. 运行adb kill-server（WSL2 bash）
5. 运行adb devices (WSL2 bash) - 你现在应该看到你的模拟设备获取它的 id
6. 进入 WSL2 中的 react-native 项目目录并运行 react-native run-android --deviceId=<YOUR_DEVICE_ID>
7. 您现在应该已准备就绪。

USB 连接的设备保持相同的流程。唯一改变的是，您将支持开发人员的手机连接到 PC，而不是第 4 步，您应该进入一个终端窗口，其中运行 adb 服务器日志，表明新设备已连接。

注意： 只有在 Windows 10 上定义了环境变量和扩展的 PATH 系统变量时，您才可以通过没有 .exe 和路径的别名在 PowerShell 中运行所有命令。如果你想使用 来自 WSL2 bash 的所有命令，当您想在 Windows 端执行某些操作时，您始终需要添加 .exe，以便 WSL2 知道它需要 访问 Windows 可执行文件。

Answer 4

steelbrain 来自here 的这个答案对我有用：

将以下内容添加到您的 WSL bashrc 或 zshrc：

export WSL_HOST_IP="$(tail -1 /etc/resolv.conf | cut -d' ' -f2)"
export ADB_SERVER_SOCKET=tcp:$WSL_HOST_IP:5037

然后创建一个防火墙条目，创建一个新的“入站”规则。选择“端口”，然后选择特定 TCP 端口“5037”，然后选择“允许连接”，然后检查所有域、私有和公共并添加名称。添加防火墙条目后，打开其属性，进入范围 -> 远程 IP 地址 -> 添加“172.16.0.0/12”。

现在我们已经覆盖了 WSL2 虚拟机并通过防火墙，您必须使用特定参数启动 adb 服务器以使其侦听所有地址（不用担心，我们只是将 WSL2 虚拟机 IP 范围列入白名单所以没有安全问题）。

创建一个 vbs 脚本，随便调用它并把它放进去

CreateObject("WScript.Shell").Run "%USERPROFILE%\AppData\Local\Android\Sdk\platform-tools\adb.exe kill-server", 0, True
CreateObject("WScript.Shell").Run "%USERPROFILE%\AppData\Local\Android\Sdk\platform-tools\adb.exe -a -P 5037 nodaemon server", 0, True

现在您只需在每次重启时调用一次 vbs 脚本，您的 WSL 虚拟机就会连接到您的主机 ADB 实例

（我只是在常规 CMD.exe shell 中调用了这两个命令：

%USERPROFILE%\AppData\Local\Android\Sdk\platform-tools\adb.exe kill-server
%USERPROFILE%\AppData\Local\Android\Sdk\platform-tools\adb.exe -a -P 5037 nodaemon server

我猜他提出了vbs，所以它仍然运行，因为如果我将它放在.bat 文件中，服务器可能会随着 bat 文件而死，没有尝试过）