React Native WebView 渲染空白页答案

【问题标题】：React Native WebView rendering blank pageReact Native WebView 渲染空白页
【发布时间】：2021-09-05 02:38:35
【问题描述】：

由于我不知道的原因，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

【问题讨论】：

标签： javascript reactjs react-native webview

【解决方案1】：

无需将您的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

【讨论】：

【解决方案2】：

试试这个并重新加载应用程序

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

【讨论】：