npm 包 react-native-webview-android-handle 使用教程

简介

react-native-webview-android-handle 是一款基于 React Native 开发的 Android 平台下的 WebView 组件。该组件可以支持加载网络或本地的 HTML 页面，并且可以与 React Native 的 API 进行交互。这款组件使用起来非常简单，本教程将会为大家详细介绍如何使用它。

安装

首先，我们需要安装 react-native-webview-android-handle 模块，打开终端窗口执行以下命令：

npm install react-native-webview-android-handle --save

使用

1. 引入 react-native-webview-android-handle 模块

首先，在需要使用 WebView 的组件中引入 react-native-webview-android-handle 模块：

import React from 'react'
import { View } from 'react-native'
import WebView from 'react-native-webview-android-handle'

1. 编写 WebView 代码

在组件中添加 WebView：

<View style={{ flex: 1 }}>
  <WebView
    style={{ flex: 1 }}
    source={{ uri: 'https://www.google.com/' }}
  />
</View>

1. 运行示例代码

实现示例代码，运行程序查看 WebView 的效果：

-- -------------------- ---- -------
------ ----- ---- -------
------ - ---- - ---- --------------
------ ------- ---- -------------------------------------

----- -------------- - -- -- -
  ------ -
    ----- -------- ----- - ---
      --------
        -------- ----- - --
        --------- ---- ------------------------- --
      --
    -------
  -
-

------ ------- --------------

API

以下是 react-native-webview-android-handle 中常用的 API：

Props

• source: WebView 要加载的 URL 地址或者 HTML 内容，必需。
• injectedJavaScript: 在 WebView 加载的页面中注入的 JavaScript 代码。
• onMessage: 当 WebView 中的 JavaScript 代码运行 window.postMessage 函数时，触发此函数。
• onLoadStart: WebView 开始加载数据时触发此函数。
• onLoadEnd: WebView 完成加载数据时触发此函数。
• onLoadProgress: WebView 加载数据时触发此函数。

方法

以下是 react-native-webview-android-handle 中常用的方法：

• goBack(): 后退 WebView。
• goForward(): 前进 WebView。
• reload(): 重新加载 WebView。

结语

react-native-webview-android-handle 组件是一款非常实用的 WebView 组件，它可以用于加载网络或本地的 HTML 页面，并可以与 React Native 的 API 进行交互，可以极大的方便我们开发工作，希望本文对您有帮助。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600560da81e8991b448df1e2