反应原生 WebView 组件

在本文中，我们将了解如何在 react-native 中创建 WebView。 WebView 用于在应用程序中显示 Web 内容。为此，我们将使用 WebView 组件。

句法：

WebView 的道具：

来源：它基本上在 Web 视图中加载 URL。
automaticAdjustContentInsets：控制网页视图的内容插入。它的默认值为 true。
injectJavaScript：它将 JavaScript 注入到 web 视图中。
injectJavaScript：它也将 JavaScript 注入到 web 视图中，但它会在视图加载时立即运行，并且只运行一次。
mediaPlaybackRequiresUserAction：它确定 HTML5 音频和视频是否需要用户在开始播放之前点击它们。默认情况下，它是真的。
nativeConfig：它覆盖用于呈现 Web 视图的本机组件。
onError：这是一个在 web 视图加载失败时调用的函数。
onLoad：这是一个在加载 Web 视图时调用的函数。
onLoadEnd：这是一个在 Web 视图加载结束时调用的函数。
onLoadStart：这是一个在 web 视图开始加载时调用的函数。
onMessage ：它是一个在 WebView 调用“ window.postMessage ”时调用的函数。
onNavigationStateChange： WebView 加载开始或结束时调用的函数。
originWhitelist：它是允许导航到的原始字符串列表。默认来源列表是“http://*”和“https://*”。
renderError：这是一个返回视图以显示是否有错误的函数。
renderLoading：它是一个返回加载指示器的函数。
scalesPageToFit：它控制是否缩放内容以适应视图。它的默认值为 true。
onShouldStartLoadWithRequest：这是一个允许自定义处理任何 Web 视图请求的函数。
startInLoadingState：它基本上强制 WebView 在第一次加载时显示加载视图。
decelerationRate：它是一个浮点数，用于确定滚动视图减速的速度。您也可以使用快捷方式，即normal和fast 。
domStorageEnabled：控制是否启用 DOM 存储。它仅适用于android平台。
javaScriptEnabled：控制是否启用 JavaScript。它仅适用于 android 平台，默认情况下其值为 true。
混合内容模式：它基本上指定了混合内容模型。它的可能值从不、总是和兼容。
thirdPartyCookiesEnabled：如果为 true，则启用第三方 cookie。它的默认值为真。
userAgent：它为 Web 视图设置用户代理。
allowedInlineMediaPlayback：决定 HTML5 视频是内联播放还是使用原生全屏控制器。它的默认值为假。
弹跳：它确定当 Web 视图到达内容边缘时是否弹跳。它的默认值为真。
contentInset：它是 Web 视图内容从滚动视图边缘插入的量。
dataDetectorTypes：它确定转换为 Web 视图内容中可点击 URL 的数据类型。可能的值为 phoneNumber、link、address、calendar event、none 和 all。
scrollEnabled：决定是否启用滚动。默认情况下，它是真的。
geolocationEnabled：确定是否在 web 视图中启用地理定位。默认情况下，它是假的。
allowUniversalAccessFromFileURLs：它确定是否应允许在文件方案 URL 的上下文中运行的 JavaScript 访问来自任何来源的内容。它的默认值为假。
allowFileAccess：判断网页视图是否有系统文件访问权限。默认情况下，它是假的。
useWebKit：这是一个已弃用的道具。请改用 source 道具。
html：它也是一个已弃用的道具。请改用 source 道具。

WebView 中的方法：

goForward()：它会在 web 视图中向前移动一页。
goBack()：它把你带回到网页视图中的一页。
reload()：它在 web 视图中重新加载当前页面。
stopLoading() ：它停止在 Web 视图中加载。

现在让我们从实现开始：

第 1 步：打开终端并通过以下命令安装 expo-cli。
```
npm install -g expo-cli
```
第2步：现在通过以下命令创建一个项目。
```
expo init myapp
```
第 3 步：现在进入您的项目文件夹，即 myapp
```
cd myapp
```
第 4 步：对于 WebView，我们在 react-native 中有 WebView 组件，它可以帮助我们在应用程序中显示 Web 内容，但是该组件现在已弃用，因此我们将使用一个名为 react-native- 的外部包来代替它网页浏览。使用以下命令安装该软件包。
```
npm install react-native-webview
```

项目结构：

示例：现在让我们实现 WebView。在这里，我们将在我们的 web 视图中呈现 GeeksforGeeks 网站。

App.js

import React from 'react';
import { WebView } from 'react-native-webview';
export default function App() {
  
  return (
    
  );
}

使用以下命令启动服务器。

npm run android

输出：如果你的模拟器没有自动打开，那么你需要手动打开。首先，去你的安卓工作室并运行模拟器。现在再次启动服务器。

参考： https://reactnative.dev/docs/0.61/webview