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

Question

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

另一方面，当使用 Iframe 时，我在网络浏览器上加载内容运行测试没有问题，但在移动设备上运行测试时无法正常工作。我已经尝试了这里其他人提出的所有解决方案，但似乎没有任何效果。我什至尝试使用 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
    }
  });

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

Answer 1

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

来自 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)

frontend

android

webview

react-native

expo