使用wsl跑react native项目踩坑
因为有的项目组环境是全mac ,但mac和linux之类的系统和window在路径处理的方式上有点不同容易出现打包出来的文件不一样 ,"例如:windows下面是路径一般这么显示"node_modules\\xxx\\xxx",linux下面路径一般 "node_modules/xxx/xxx"",很容易出现配置与路径不匹配的问题,达不到预期效果而且容易出现意外的Bug。
1.为什么不能直接在window跑
因为有的项目组环境是全mac ,但mac和linux之类的系统和window在路径处理的方式上有点不同容易出现打包出来的文件不一样 ,"例如:windows下面是路径一般这么显示"node_modules\\xxx\\xxx",linux下面路径一般 "node_modules/xxx/xxx"",很容易出现配置与路径不匹配的问题,达不到预期效果而且容易出现意外的Bug。
2.工具环境选择
1)直接套windows环境 (不可取)
在wsl上使用window adb环境在连接window android模拟器和一些操作上很方便,但有个最大的问题因为项目存在wsl但是环境在window构建的时候读wsl项目文件很容易出现各种问题,相关错误我就不贴了。
2)使用wsl本身环境
ANDROID_HOME建立例如“/home/chenjixue/android_sdk”(这一步相当关键不要忽视后续有很多插件和工具像sdkmanager的自动安装与查找都是走这个)
下载下面这些都解压到ANDROID_HOME目录下
提示!
以下地址一直在变化而且可能需要科学上网甚至需要开全局代理如找不到可以自己在官网页面搜搜下载或者只下载commandlinetools配置系统变量后使用commandlinetools下载
adb 下载页面
https://developer.android.google.cn/tools/releases/platform-tools?hl=zh-cn
emulator 下载
模拟器下载归档 | Android Studio | Android Developers
commandlinetools下载
https://googledownloads.cn/android/repository/commandlinetools-linux-13114758_latest.zip
在解压缩的 cmdline-tools 目录中,创建一个名为 latest 的子目录。
将原始 cmdline-tools 目录内容(包括 lib 目录、bin 目录、NOTICE.txt 文件和 source.properties 文件)移动到新创建的 latest 目录中。
commandlinetools中sdk manager使用教程(adb,emulator,cmake,ndk也可以直接使用sdk manage下载会自动放到ANDROID_HOME下面)
https://developer.android.com/tools/sdkmanager?hl=zh-cn
修改系统变量
vim ~/.bashrc
修改这些
# 设置 ANDROID_HOME
export ANDROID_HOME="/home/chenjixue/android_sdk"
# 设置安卓开发相关环境变量
# adb
export PATH=$ANDROID_HOME/platform-tools:$PATH
# emulator
export PATH=$ANDROID_HOME/emulator:$PATH
# sdkmanager
export PATH=$ANDROID_HOME/cmdline-tools/latest/bin:$PATH
修改完成成记得source ~/.bashrc 立即应用
3.wsl连接window安卓模拟器
在windows上

一般adb连接端口为这个数字加一,例如emulator-5560对应5561 adb连接端口
在windows下面执行以下操作
开放window端口防火墙
netsh advfirewall firewall add rule name="wslportxxxx" dir=in action=allow protocol=TCP localport=xxxx
查看端口开放情况
netsh advfirewall firewall show rule name=all | findstr "xxxx"
-------
转发wsl端口到windows(开启端口要谨慎例如代理软件最喜欢的10809和10808端口就不要开避免转发回环死循环)
netsh interface portproxy add v4tov4 listenaddress=0.0.0.0 listenport=xxxx connectaddress=127.0.0.1 connectport=xxxx
查看端口代理情况
netsh interface portproxy show all
开启端口嫌麻烦可以直接封装成bat脚本,记得编码保存为Ascii
@echo off
:: 必须用管理员权限运行
net session >nul 2>&1 || (
echo 请用管理员权限运行此脚本!
pause
exit /b
)
:MENU
cls
echo *********************************************************************
echo 已存在
echo 端口转发规则:
netsh interface portproxy show v4tov4
echo.
echo 防火墙规则 (WSL 相关):
netsh advfirewall firewall show rule name=all | findstr "wsl"
echo *********************************************************************
echo.
echo.
echo.
echo WSL 端口管理脚本
echo ============================================
echo 1. 添加端口转发
echo 2. 删除端口转发
echo 3. 退出
echo ============================================
set /p choice=请选择操作 [1-3]:
if "%choice%"=="1" goto ADD_PORT
if "%choice%"=="2" goto DELETE_PORT
if "%choice%"=="3" exit
echo 请选择有效选项!
pause
goto MENU
:ADD_PORT
echo.
set /p port=请输入要添加的端口号:
if "%port%"=="" (
echo 未输入端口号!
pause
goto MENU
)
:: 添加端口转发
netsh interface portproxy add v4tov4 ^
listenaddress=0.0.0.0 ^
listenport=%port% ^
connectaddress=127.0.0.1 ^
connectport=%port%
if errorlevel 1 (
echo 警告: 端口 %port% 的端口转发规则添加失败
pause
goto MENU
) else (
echo 端口 %port% 转发已添加
)
:: 清理已有防火墙规则并添加
netsh advfirewall firewall delete rule name="wsl%port%" >nul 2>&1
netsh advfirewall firewall add rule ^
name="wsl%port%" ^
dir=in ^
action=allow ^
protocol=TCP ^
localport=%port%
if errorlevel 1 (
echo 警告: 端口 %port% 的防火墙规则添加失败
pause
goto MENU
) else (
echo 端口 %port% 防火墙规则已添加
)
pause
goto MENU
:DELETE_PORT
echo.
set /p port=请输入要删除的端口号:
if "%port%"=="" (
echo 未输入端口号!
pause
goto MENU
)
:: 删除端口转发
netsh interface portproxy delete v4tov4 ^
listenaddress=0.0.0.0 ^
listenport=%port%
if errorlevel 1 (
echo 警告: 删除端口 %port% 的转发规则失败,可能不存在
) else (
echo 端口转发 %port% 已删除
)
:: 删除防火墙规则
netsh advfirewall firewall delete rule name="wsl%port%" >nul 2>&1
if errorlevel 1 (
echo 警告: 删除防火墙规则 wsl%port% 失败,可能不存在
) else (
echo 防火墙规则 wsl%port% 已删除
)
pause
goto MENU
启动直接输入端口号一键执行上述操作
在wsl执行一下操作
查看在wsl所连接宿主window 虚拟网卡ip
cat /etc/resolv.conf | grep nameserver | awk '{print $2}'

adb connect 172.22.112.1:xxxx,看到下面说明wsl成功连接window安卓模拟器

做完上诉这些准备就可以愉快的在npm run android wsl跑rn项目
4.使用react-devtools调试 (可选)
安卓模拟器与宿主window 之间建立端口转发 (在某些版本手动启动的react-devtools,不转发会无法建立通讯)
adb reverse tcp:8097 tcp:8097

5.借用window魔法(可选)
这段很多关键字不能暴露懂得自然懂,(审核我这段没有教任何翻墙方法我只是借用window上的网络环境)

在wsl上执行vim ~/.bashrc
# 定义变量
PROXY_IP=$(ip route | grep default | awk '{print $3}')
# 或者 PROXY_IP=$(cat /etc/resolv.conf | grep nameserver | awk '{print $2}')这两个选择window上ipconfig和wsl虚拟网卡地址一致的那个
# 监听端口
HTTP_PORT="10809"
SOCKS_PORT="10808"
# 使用变量设置代理
export http_proxy="http://${PROXY_IP}:${HTTP_PORT}"
export https_proxy="http://${PROXY_IP}:${HTTP_PORT}"
export all_proxy="socks5://${PROXY_IP}:${SOCKS_PORT}"
然后source ~/.bashrc立即启用
还是会遇到问题部分node脚本或者其他不走http_proxy变量代理,例如electron
这个时候就要在windows上把tun模式开启了,执行完后关掉这个模式有点消耗流量和性能
![]()
更多推荐

所有评论(0)