Running React Native in WSL with the emulator runn

问题:

I haven't done Android development in a while, so my knowledge of modern Android development is spotty.

I'm trying to learn React Native. I use WSL as my primary development environment. Since it'll probably be a pain to set up the Android emulator in Linux/WSL, I want to run the emulator directly on Windows. However, I'd prefer to be able to run react-native run-android in WSL.

How would I set up React Native to be able to run react-native run-android in WSL and run the app in an Android emulator on Windows?

My ANDROID_HOME variable should be set up correctly, but I don't know enough about Android to know if this is doing anything:

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

回答1:

AFAIK it is not possible to use react-native in WSL due to a number of issues.

e.g. https://github.com/Microsoft/BashOnWindows/issues/1523

However, I've found a workaround that combines a native windows android build with a npm stack in WSL. Realistically, you'll want to install the native Windows Android Studio/SDK to use the Intellij IDE and the emulator anyway. The trick is to separate out the Gradle based Android compile.

Workflow

All project setup and package management performed in WSL with npm/yarn. react-native-cli installed globally in WSL. No need for a duplicate windows binary node/npm stack.

Don't use react-native run-android, instead compile and deploy from cmd. From the /android directory inside your project, execute the gradle wrapper gradlew.bat installDebug, or with the Creator's Update, you can do this from inside the WSL bash shell /mnt/c/Windows/System32/cmd.exe /C gradlew.bat installDebug. Don't use the unix gradlew script.

Once the APK has been assembled and uploaded to your device or emulator, run the debug server from within WSL using the command react-native start.

I've tested this out with some fairly complex projects using multiple native Android components. Hope this helps.

• Note: For this to work your project needs to be located in the native Windows file system i.e. /mnt/c.

回答2:

It is possible to set it up so that the emulator runs in Windows while running react-native run-android in WSL. The benefits of doing it this way over @pscl's way is that this way supports autolinking. Here is what you need to do to get it working.

Windows

The only thing required on the Windows side is to install Android Studio and setup the emulator / virtual device. This is pretty straightforward so I'm not gonna walk you through that.

Windows Subsystem for Linux

There's a bit more to setting up this side of things, so bear with me. (My WSL is Ubuntu 18.04, this is untested on other flavors.)

1. Download and unzip the Android command line tools. (Currently found on the Android Studio download page, scroll down to "Command line tools only" and select the Linux download option.)
2. Look inside the unzipped folder and move the directory named tools to ~/Android/Sdk/tools. (Create the ~/Android/Sdk directories if they don't exist.)
3. Download and unzip JDK 8. (I recommend downloading from AdoptOpenJDK. Also, make sure to install OpenJDK 8 otherwise sdkmanager won't work, which we use later.)
4. Move the unzipped folder to /opt/jdk8u222-b10. (You can actually put this wherever you want, just make sure the JAVA_HOME environment variable points to this unzipped folder.)
5. Set the following environment variables in your ~/.bashrc file. (The paths could be different for you!)

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. Restart your bash terminal and execute the command sdkmanager "platform-tools" to download the latest platform tools. (The adb tool comes from here.)

React Native

Now that everything is setup, it's time to play!

1. Start the emulator in Windows.
2. Open your project directory in WSL and run react-native start. (Keep this terminal open).
3. Open your project directory in another WSL terminal and run react-native run-android. (The first time you run this, React Native will download a few other SDKs based on your virtual device. You can see all installed SDKs by running sdkmanager --list. See the docs for sdkmanager for more info.)

Running on Device

This is a quick note on making it so you can install your app to a physical device. The trick here is making sure both of your adb executables are on the same version. (They should be since we installed it through sdkmanager.)

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

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

Once you've confirmed that they are on the same version, make sure you start the adb server from the windows executable (Run adb.exe kill-server && adb.exe start-server). Then you can test if it works by running adb devices in WSL and you should see your device that is plugged in.

回答3:

For those who struggle to make Windows 10 Android Studio work with WSL2 located react-native project.

Inital setup

You need to install on your Windows 10 Android Studio.

Set user variable: ANDROID_HOME=C:\Users\<YOUR_USER>\AppData\Local\Android\Sdk

Add to system variable 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)

Then go to your WSL2 and install:

1. sudo apt-get install unzip
2. get android studio Command Line Tools Only and unzip it into /home//Android
3. install jdk 8 with sudo apt-get install openjdk-8-jdk
4. add this to your .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. restart bash and run sdkmanager --sdk_root=${ANDROID_HOME} "platform-tools"
6. run adb version && adb.exe version check if versions match

---

Running on emulator

1. run adb kill-server (ps) / adb.exe kill-server (wsl2 bash)
2. run adb -a -P 5037 nodaemon server (ps) / adb.exe -a -P 5037 nodeamon server (wsl2 bash) - don't close terminal window!
3. run emulator -avd <YOUR_AVD_NAME> (ps) / emulator.exe -avd <YOUR_AVD_NAME> - don't close terminal window!
4. run adb kill-server (WSL2 bash)
5. run adb devices (WSL2 bash) - you should now see your emulated device pick up it's id
6. go to your react-native project directory in WSL2 and run react-native run-android --deviceId=<YOUR_DEVICE_ID>
7. you should be all set up now.

Same flow stays for USB connected devices. The only thing that is changing is that instead of step 4 you connect your developer enabled phone to PC and you should get in a terminal window with running adb server log that new device is connected.

NOTE: You can run all commands in PowerShell by aliases without .exe and path only if you have defined environmental variables on windows 10 and extended PATH system variable. If you want to use all commands from WSL2 bash you always need to add .exe when you want to execute something on windows side so WSL2 knows that it needs to reach to windows executables.