React Native v-0.63 中的 WebView v-11.2.3 组件未加载其内容（使用 expo cli）答案

【问题标题】：WebView v-11.2.3 component from React Native v-0.63 not loading its content (using expo cli)React Native v-0.63 中的 WebView v-11.2.3 组件未加载其内容（使用 expo cli）
【发布时间】：2021-05-21 15:40:29
【问题描述】：

正如问题所说，我的 Webview 组件不会加载其内容。我在与 WebView 相关的控制台中没有弹出错误或任何问题。我正在使用博览会。

另一方面，在使用 iframe 时，我在 Web 浏览器上加载内容运行测试时没有问题，但在移动设备上运行测试时无法正常工作。我在这里尝试了其他人提出的所有解决方案，但似乎没有任何效果。我什至尝试使用 html 而不是 uri 在 WebView 中使用 iframe，还将 WebView 组件嵌套到 View 中并赋予它 flex:1 但屏幕上仍然没有出现任何内容，但右上角有一个小红点。

如您所见，我使用注释代码完成的所有测试。第一个（已注释）函数使用 Iframe 组件，第二个（未注释）仅是 WebView。我的代码如下所示：

import React from 'react';
import { StyleSheet, Text, Button, View, Dimensions } from 'react-native';
import Iframe from 'react-iframe';
import Header from './Header';
import ButtonMenu from './ButtonMenu';
import { WebView } from 'react-native-webview';


const deviceHeight = Dimensions.get('window').height;
const deviceWidth = Dimensions.get('window').width;


// export default function NatureQuestGps({navigation}) {
//     return (
      
//         <View style={styles.pageNatureQuest}>
//         <View style={styles.headerContainer}>
//         <Header/>
//         <ButtonMenu color='#49AC72' onPress={()=> navigation.toggleDrawer()} />
//         </View>
//         <Iframe  url="https://www.google.com/maps/d/embed?mid=11fEhEZiv72kKKy7XbbQ3GIufEcTpWUa2"
//         width="400px"
//         height="400px"
//         display="initial"
//         position="relative"/>
//         </View>
    
//     );
// }

export default function NatureQuestGps() {
  return (
    <View style={{ flex: 1, alignItems: 'flex-end' }}>
      <WebView 
      source= {{ uri: 'https://www.google.com/maps/d/embed?mid=11fEhEZiv72kKKy7XbbQ3GIufEcTpWUa2'}}
      style={styles.webview}
      javaScriptEnabled={true}
      domStorageEnabled={true}
      startInLoadingState={false}
      scalesPageToFit={true}
      />
    </View>
  );
}


const styles = StyleSheet.create({
    pageNatureQuest:{
      flex:1,
      flexDirection:'column',
      alignItems:'center',
    },
    headerContainer: {
      width:'100%',
      backgroundColor:'#ededed',
      },

    webview: {
      flex: 1,
      backgroundColor: 'yellow',
      width: deviceWidth,
      height: deviceHeight
    }
  });

提前感谢任何花时间提供帮助的人

【问题讨论】：

标签： android react-native webview frontend expo

【解决方案1】：

我找到了解决方案，事实证明，WebView 组件在使用 EXPO 在移动设备中进行测试时有效，但在我的浏览器中加载了 naver，而 iframe 在我的浏览器中有效但在我的移动设备中无效。无论如何，答案是，如果您希望 google maps trail 或 parcour 适用于移动设备和 web，您将需要一个库来创建您自己的地图路线和小径。但是，如果您只是制作移动应用程序，请选择 WebView 组件，尽管它可能无法在您的计算机浏览器中进行测试。

【讨论】：