React Native WebView 无法在 Android 中工作

Question

我正在使用 React Native，并且正在使用“react-native-webview”中的 Webview。

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>
    )
  }

在 IOS 上工作正常，但在 Android 上则不然，在终端上显示此错误：

加载页面时遇到错误 {"canGoBack": false, "canGoForward": false，“代码”：-2，“描述”：“net::ERR_NAME_NOT_RESOLVED”， “正在加载”：错误，“目标”：789，“标题”：“”，“网址”： “https://www.youtube.com/watch?v=QzqmlgnSE38”}

并在模拟器上显示此错误：

加载页面时出错域：未定义错误代码：-2描述： 网络::ERR_NAME_NOT_RESOLVED

有人知道那里出了什么问题吗？

Answer 1

AndroidManifest.xml

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

确保您正在测试的模拟器或设备可以访问互联网。有时 Android 模拟器会出现网络问题。您可以尝试重新启动模拟器、检查网络设置或确保模拟器未处于飞行模式。

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',
  });
}, [navigator]);

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' }}
      onError={(syntheticEvent) => {
        const { nativeEvent } = syntheticEvent;
        console.warn('WebView error: ', nativeEvent);
      }}
      cacheEnabled={false}
      cacheMode={'LOAD_NO_CACHE'}
    />     
  </SafeAreaView>
 );
}