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

Posted 2023-05-07

【中文标题】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)

【发布时间】：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"
//         
//         
//         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
    
  ); 

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

【参考方案1】：

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