随着手机的流行，移动端的开发也越来越受到重视。而其中，前端开发也是不可或缺的一部分。在移动端的开发中，我们通常会使用 Webview 来实现部分页面或者功能的开发。而 react-native-android-webview 则是在 React Native 开发移动应用中使用 Webview 实现部分界面的跳转、请求数据等功能的开源库。
安装
在使用 react-native-android-webview 之前，需要先安装 React Native。安装 React Native 请参考 React Native 中文网页。
接下来，使用 npm 安装 react-native-android-webview：
$ npm i react-native-android-webview --save
导入
我们需要导入系统 Webview 组件和 react-native-android-webview 组件：
import React, { Component } from 'react';
import { View, WebView, Platform } from 'react-native';
import AndroidWebView from 'react-native-android-webview';在 iOS 平台上使用系统的 webview：
<WebView
source={{ uri: 'http://www.example.com' }}
/>在 Android 平台上使用 react-native-android-webview 组件，导入后即可使用：
<AndroidWebView
source={{ uri: 'http://www.example.com' }}
/>用法
在使用 react-native-android-webview 时，我们需要对其组件的一些属性进行配置：
source：Webview 加载的 URL。userAgent：设置要在 User-Agent 标头中使用的默认值。allowFileAccess：启用或禁用具有文件访问权限的 JS 访问文件系统路径。allowFileAccessFromFileURLs：启用或禁用具有文件访问权限的 JS 访问带有 file:// 协议的路径。renderError：在遇到错误时渲染的组件。renderLoading：在页面加载时渲染的组件。
示例代码：
-- -------------------- ---- -------
---------------
--------- ---- ------------------------ --
---------------------- -------- -- ----- ------ ---- ------------------ ------- ---- ------ -------------------- --------------
----------------------
----------------------------------
--------------- -- -
------
-------------------
-------
--
----------------- -- -
------
--------------------
-------
--
--事件处理
React Native Android WebView 组件也支持一些事件，供我们在使用时处理，如：
onLoad：当 WebView 完成加载后调用此函数。onError：当 WebView 加载错误时调用此函数。onLoadStart：开始加载时的事件处理程序。onLoadEnd：结束加载时的事件处理程序。无论是成功还是失败。onShouldStartLoadWithRequest：可以决定是否允许在当前 WebView 中导航，默认情况下允许所有导航。
示例代码：
-- -------------------- ---- -------
---------------
--------- ---- ------------------------ --
---------- -- -----------------------
--------------- -- -------------------------
------------- -- -----------------------
--------------------------------------- -- -
-- --------------------------------- -
------ ------ -- ------ ----- -------
-
------ ----- -- ------ ---- ------
--
--总结
通过对 react-native-android-webview 的学习，我们可以使用 React Native 来实现移动端 Webview 的加载和使用。这个库不仅简单易用，而且还具有深度和学习与指导意义，在日常的开发中也可以更加快速高效地进行前端开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055feb81e8991b448dd9fd