React Native Release构建网络请求失败问题求助

排查方向及解决方案 #

1. 确认网络权限与配置正确性 #

你已经添加了android:usesCleartextTraffic="true"，但需额外检查：

• 在AndroidManifest.xml的<manifest>根标签下必须包含基础网络权限：

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

• 确认android:usesCleartextTraffic="true"确实写在<application>标签内部，无拼写错误。

2. 处理自签SSL证书信任问题 #

改用HTTPS后，Android Release模式默认不认可自签证书，需手动配置信任：

1. 将自签的.crt证书文件放入android/app/src/main/res/raw/目录（无raw目录则新建）
2. 创建android/app/src/main/res/xml/network_security_config.xml配置文件：

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <domain-config cleartextTrafficPermitted="false">
        <domain includeSubdomains="true">192.168.1.10</domain>
        <trust-anchors>
            <certificates src="@raw/你的证书文件名" />
            <certificates src="system" />
        </trust-anchors>
    </domain-config>
</network-security-config>

3. 在AndroidManifest.xml的<application>标签中指定该配置：

<application
    ...
    android:networkSecurityConfig="@xml/network_security_config"
    android:usesCleartextTraffic="true">

注意替换你的证书文件名为实际证书名（无需加后缀）。

3. 调整混淆规则避免网络代码被破坏 #

React Native Release构建默认开启混淆，若规则影响网络类会导致请求失败。在android/app/proguard-rules.pro中添加以下规则：

# 保留OkHttp相关类
-keep class okhttp3.** { *; }
-keep interface okhttp3.** { *; }
-dontwarn okhttp3.**

# 保留Retrofit（若使用）
-keep class retrofit2.** { *; }
-keep interface retrofit2.** { *; }
-dontwarn retrofit2.**

# 保留Gson（若用其解析JSON）
-keep class com.google.gson.** { *; }
-keep interface com.google.gson.** { *; }

4. 确认后端服务的可达性 #

Release模式下应用的网络环境可能与Debug不同，需检查：

• 测试手机与后端服务（192.168.1.10:4000）是否在同一WiFi网络
• 后端服务是否绑定0.0.0.0（若绑定127.0.0.1，外部设备无法访问）
• 关闭电脑防火墙，避免拦截4000端口的请求

5. 捕获更详细的错误日志 #

修改代码打印完整错误信息，便于定位问题：

try {
    const res = await fetch('http://192.168.1.10:4000/api/');     
    const json = await res.json(); 
} catch(err) {
    console.log('错误详情:', err.message, err.stack, err.name);
}

通过命令adb logcat *:S ReactNative:V ReactNativeJS:V查看Release模式下的详细日志输出。

内容的提问来源于stack exchange，提问作者Mike