#react-native-wkwebview-reborn-fchasen的使用教程
前言
React Native是一种跨平台移动应用开发框架，但是它的默认网页渲染器在某些情况下可能无法满足我们的需求，比如在iOS平台上，React Native默认使用的是UIWebView，而UIWebView在iOS8以后已经过时，Safari也已经使用WKWebView替代。所以，很多开发者使用react-native-webview来替代React Native的默认网页渲染器。但是，react-native-webview效率并不高，不支持JavascriptCore，受限于WebView的安全性，不支持Cookie和LocalStorage，也缺乏定制和扩展性。因此，使用react-native-wkwebview-reborn-fchasen这个npm包可以更好的满足我们的需求。
在这篇文章中，我们将学习如何使用React Native的npm包react-native-wkwebview-reborn-fchasen。
安装
首先，需要在React Native项目中安装react-native-wkwebview-reborn-fchasen这个npm包。在React Native项目的根目录下，打开终端（或命令行工具），输入以下命令：
npm install react-native-wkwebview-reborn-fchasen --save
使用
使用react-native-wkwebview-reborn-fchasen的过程类似于使用React Native中的WebView组件。我们可以通过两种方式使用它：一种是直接导入这个组件，另一种是封装WebView的class，以便复用。这里，我们将介绍第二种方法，因为这样更便于管理、维护和重用代码。
创建组件
我们先创建一个WKWebView.js文件，作为封装后的组件。在这个文件中，我们导入所需的库：
------ ------ - --------- - ---- -------- ------ - ----- ----------- -------- - ---- --------------- ------ - ------- - ---- ----------------------------------------
其中，React是必需的，View是用于组织UI控件的容器，StyleSheet是用于定义样式的，Platform是用于识别不同的平台的，WebView是引用react-native-wkwebview-reborn-fchasen中的WebView组件。接下来，在class中定义组件：
----- --------- ------- --------- -
-------- -
------ -
----- -------------------------
--------
---------------
----------------------
--
-------
--
-
-这里，我们使用了ES6的class语法，继承了Component。在render函数中，我们返回一个View容器，内部装载了我们导入的WebView组件。这里我们使用ES6的展开操作符，将传入WKWebView组件的所有props传递给WebView组件。如果WebView组件需要设置其他属性（比如userAgent、scalesPageToFit等），也可以在这里设置。
配置参数
接着，我们为WebView组件定义一些参数，来满足我们的实际需求。可以使用类似于下面的代码：
------ --------- - -
------- -------------------------
--
------ ------------ - -
------- -----
--这里，我们用React Native自带的PropTypes来设置源（source）参数的类型。同时，我们添加一个默认值null，当没有给source传递任何参数时，就是显示一个空白的WebView。从上面提到的WebView的文档可以发现，还有许多其他的参数可以设置，比如userAgent、scalesPageToFit、onMessage等，都可以参考原文档进行设置。
现在，我们已经完成了WKWebView组件的封装。
使用组件
接着，我们来看看如何使用WKWebView组件。首先，需要在项目中导入我们封装的WKWebView组件：
------ --------- ---- --------------
然后，在需要显示WebView的地方使用WKWebView组件：
----- --------- ------- --------- -
-------- -
----- - --- - - -----------
------ -
----- -------------------------
----------
--------- --- --
--
-------
--
-
-在这里，我们是从外部传进来一个来源（uri）参数，使用现在已经封装好的WKWebView组件将这个uri加载进来。这个uri可以是任何你需要加载的网址。当然，你还可以从外部传入任何你想要传入的参数。这个例子只是为了演示WKWebView如何使用。
运行
现在，我们已经完成了WKWebView的封装和使用。如果你已经设置好React Native的环境，可以直接启动React Native应用程序：
react-native run-ios
或是
react-native run-android
由于我这里用的是iOS平台，所以只介绍iOS的运行方法。打开你的模拟器或真机，你应该能看到一个加载了你传入uri的WebView。在这里，你可以修改WKWebView.js文件来添加其他功能，比如Cookie、LocalStorage、自定义UserAgent等。
大功告成
现在，我们已经成功地使用了react-native-wkwebview-reborn-fchasen这个npm包，使用了WKWebView.js文件来重新封装了WebView组件。我们解决了React Native默认Web渲染器中的一些不足，提高了应用的效率和扩展性。
完整的WKWebView.js代码如下所示：
------ ------ - --------- - ---- --------
------ - ----- ----------- -------- - ---- ---------------
------ - ------- - ---- ----------------------------------------
----- ------ - -------------------
---------- -
----- --
--
-------- -
---------------- ----------
----- --
--
---
----- --------- ------- --------- -
-------- -
------ -
----- -------------------------
--------
---------------
----------------------
--
-------
--
-
-
------------------- - -
------- -------------------------
--
---------------------- - -
------- -----
--
------ ------- ----------祝好运!
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600575b381e8991b448ea69b