React Native WebView Android加载失败求助：net::ERR_NAME_NOT_RESOLVED

问题详情 #

我用React Native开发，使用react-native-webview组件加载YouTube视频，iOS端运行正常，但Android端无法加载，终端和模拟器报错如下：

终端报错：

Encountered an error loading page {"canGoBack": false, "canGoForward": false, "code": -2, "description": "net::ERR_NAME_NOT_RESOLVED", "loading": false, "target": 789, "title": "", "url": "https://www.youtube.com/watch?v=QzqmlgnSE38"}

模拟器显示：

Error loading page Domain: undefined Error code: -2 Description: net::ERR_NAME_NOT_RESOLVED

我的代码：

import React, { useEffect } from 'react'
import { Text, SafeAreaView } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import WebView from 'react-native-webview';
import { styles } from '../theme/appTheme';

export const AtmungBienenflugScreen = () => {

    const navigator = useNavigation();

    useEffect( () => {
      navigator.setOptions({
        title:'',
        headerTintColor: 'black',
      })
    })

    return (
      <SafeAreaView style={styles.container}>
          <Text style={ styles.titleLekt}>2.4 Bienenflug</Text>

          <WebView 
          style= { styles.video }
          autoPlay
          playsInline
          source={{ uri: 'https://www.youtube.com/watch?v=QzqmlgnSE38'  }} />
      </SafeAreaView>
    )
  }

问题原因与解决方法 #

net::ERR_NAME_NOT_RESOLVED本质是域名解析失败，Android端出现这个问题通常有以下几种解决路径：

1. 检查Android网络权限 #

确保项目已添加网络访问权限，打开android/app/src/main/AndroidManifest.xml，确认<manifest>标签内存在以下代码：

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

如果没有，直接添加到该位置（不要放在<application>标签内部）。

2. 修复模拟器网络异常 #

• 重启Android模拟器：很多时候模拟器网络连接会出现临时异常，重启即可恢复。
• 切换网络环境：打开模拟器设置→网络与互联网，确认已连接可用网络，或者切换到手机热点等其他网络。
• 验证网络可用性：在模拟器内置浏览器中访问其他网站（比如google.com），确认网络本身是否正常，排除DNS缓存问题。

3. 改用YouTube嵌入格式 #

直接加载YouTube的watch页面在Android WebView中存在兼容性问题，建议替换为嵌入链接格式：
将原URL https://www.youtube.com/watch?v=QzqmlgnSE38 修改为 https://www.youtube.com/embed/QzqmlgnSE38，调整后的WebView代码：

<WebView 
  style={ styles.video }
  autoPlay
  playsInline
  source={{ uri: 'https://www.youtube.com/embed/QzqmlgnSE38'  }} 
  allowsInlineMediaPlayback={true} // 确保跨平台内联播放支持
/>

嵌入格式专门为网页内嵌场景设计，能避免原页面的跳转和权限限制问题。

4. 更新Android系统WebView版本 #

过旧的WebView版本可能不支持现代网页特性，在设备设置→应用→Android System WebView中检查版本，更新到最新版后重试。

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