React-Native-WebView不显示任何网站

Question

我刚刚在react native中安装了react-native-webview。之后，我试图显示网站，但它正在加载。

我的代码

import React from "react";
import { View ,Text} from 'react-native';
import {WebView} from 'react-native-webview';
const WebViewComponent = () =>{
return <WebView source={{ uri: 'https://reactnative.dev/' }} style={{ flex: 1 }} />;
}
export default WebViewComponent;

我只是试图显示网站，但它不显示。是否有任何额外的依赖需要显示WebView或我只是搞砸了我的代码。

Answer 1

您提供的代码看起来是正确的。它应该在WebView组件中显示react .dev网站。但是，如果网站没有加载，你可以检查一些事情:

检查react-native-webview包是否正确安装。确保你已经使用npm或yarn安装了包，并且安装成功完成，没有任何错误。

检查您是否已授予访问internet的必要权限。在你的AndroidManifest.xml文件中，确保你有以下权限:<uses-permission android:name="android.permission.INTERNET" />

检查控制台日志是否有错误。如果有任何错误，请尝试调试并修复它们。

下面是检查网站是否加载的代码:

import React, { useState } from "react";
import { View, Text } from "react-native";
import { WebView } from "react-native-webview";
const WebViewComponent = () => {
const [isError, setIsError] = useState(false);
const handleError = (error) => {
console.log("Error loading website", error);
setIsError(true);
};
return (
<View style={{ flex: 1 }}>
{isError ? (
<Text style={{ textAlign: "center", marginTop: 16 }}>
Error loading website.
</Text>
) : (
<WebView
source={{ uri: "https://reactnative.dev/" }}
style={{ flex: 1 }}
onError={handleError}
/>
)}
</View>
);
};
export default WebViewComponent;