React Native WebView 渲染空白页面

Question

由于我不知道的原因，webview 组件没有像我期望的那样返回网页，而是呈现一个空白的白色页面。我在网络和Android物理设备上尝试过。 此外，我用谷歌搜索了很多，但我尝试的一切都不起作用。

这是代码：

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View, SafeAreaView } from 'react-native';
import WebView from 'react-native-webview';

const App = () => {
  return <SafeAreaView>
    <View style={styles.container}>
      <WebView source={{ uri: "https://google.com" }} />
    </View>
  </SafeAreaView>
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default App

Answer 1

尝试此操作并重新加载应用程序

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View, SafeAreaView } from 'react-native';
import WebView from 'react-native-webview';

const App = () => {
  return (     
     <WebView source={{ uri: "https://www.google.com/" }} />
  );

}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default App

Answer 2

无需将您的

WebView

标签放入

View

删除您的

View

和

SafeAreaView

标签即可正常工作 用这个替换你的代码

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View, SafeAreaView } from 'react-native';
import WebView from 'react-native-webview';

const Login = () => {
  return (
    <WebView source={{ uri: "https://google.com" }} />
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default Login

Answer 3

这个工作对我来说删除

SafeAreaView

import { View } from "react-native";
import { WebView } from "react-native-webview";
const App = () => {
    return (
        <View style={{ flex: 1 }}>
            <WebView source={{ uri: url }} />
        </View>
    )
}
export default App

Answer 4

我最近遇到了这个问题。

我试图通过 webview 使用 https://docs.google.com/gview 显示我的文档。然而，它有时确实会出现。有时我会看到白色的空白屏幕。

在研究了各种解决方案后，我意识到我们可以做到这一点。

const webViewRef = useRef();

<WebView
   ref={webViewRef}
   syle={{flex: 1}}
   source={{uri: uri}}
   onLoadEnd={data => {
        const {nativeEvent} = data;
        const {title} = nativeEvent;

        if (!title.trim()) {
            webViewRef.current?.stopLoading();
            webViewRef.current?.reload();
        }
    }}
/>

我们在这里所做的基本上是检查所请求页面的标题。如果无法获取标题，则刷新页面。