webview无法加载http流量及Expo修改Android权限

前言

在使用RN直接创建项目时，我们可以进行修改里面的一些权限，但是当我们使用Expo开发时，却发现没有android的这些文件夹，所以修改权限无从下手，下面一起看看如何在Expo中修改权限。

react-native-webview无法加载http流量

报错

Error loading page
Domain: undefined
Error Code:
Description: net::ERR_CLEARTEXT_NOT_PERMITTED

错误信息 net::ERR_CLEARTEXT_NOT_PERMITTED 通常出现在 Android 应用中的 WebView 或网络请求中，表示应用尝试通过未加密的 HTTP 协议（明文传输）访问资源，而这种行为被禁止了。
这个错误是由于 Android 系统限制未加密的 HTTP 流量。如果可能，建议切换到 HTTPS。如果需要支持 HTTP，可以修改应用的网络安全配置。

修改http网络权限

1.迁移到 EAS Build

通过运行以下命令安装 EAS CLI：

npm install -g eas-cli

初始化 EAS：

eas build:configure

2.创建 android 文件夹

在纯 Expo 管理的工作流中，你无法直接修改 AndroidManifest.xml，所以你需要创建一个自定义的配置文件。

使用 expo prebuild 命令生成 Android 文件夹：

expo prebuild

此命令会为你的项目生成 android 文件夹，让你可以访问原生的 Android 配置。

3.修改 AndroidManifest.xml

在生成的 android/app/src/main/AndroidManifest.xml 文件中，找到 标签，然后添加以下属性：

<application
    android:usesCleartextTraffic="true"
    ... >

这将允许所有的 HTTP 请求。如果只希望允许特定域的 HTTP 请求，请参照下面的网络安全配置文件部分。

4.添加网络安全配置文件（可选）

如果你只希望为特定的域启用 HTTP，可以添加网络安全配置文件。
在 android/app/src/main/res/xml/ 文件夹下，创建 network_security_config.xml 文件：

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <domain-config cleartextTrafficPermitted="true">
        <domain includeSubdomains="true">example.com</domain>
    </domain-config>
</network-security-config>

然后在 AndroidManifest.xml 中应用这个安全配置：

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

5. 构建项目

eas build --platform android

6.使用 HTTPS

如果可能的话，最好从根本上解决问题，使用 HTTPS 进行网络请求。这样不仅解决了 Android 9 及以上的 HTTP 限制问题，还可以提高数据传输的安全性。