在前端开发中，我们常常需要在 webview 中显示一些页面，与原生代码进行通信。而 react-native-webview-bridge-invoke 就是一款能够方便快捷地实现 webview 与原生代码通信的 npm 包。本篇教程将详细介绍如何使用 react-native-webview-bridge-invoke，并提供示例代码供大家参考。
1. 安装 react-native-webview-bridge-invoke
npm 包 react-native-webview-bridge-invoke 需要和 react-native-webview 一起使用，因此需要在项目中安装这两个包。
$ npm install --save react-native-webview react-native-webview-bridge-invoke
2. 实现通信
首先，在 React Native 中，我们需要引入 WebView 组件，并在 render 中将其渲染出来。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- ---- - ---- ---------------
------ ------- ---- -----------------------
------ ------- ----- --- ------- --------------- -
-------- -
------ -
----- -------- ----- - ---
--------
--------- ---- ------------------------- --
--
-------
--
-
-接着，在原生代码中，我们需要注册一个名为 RNWebViewBridgeInvoke 的自定义 scheme，并在调用 WebView 时将其传递给 url。
-- -------------------- ---- ------- --- ------ - ----------- ----------------------------------- --- --------- - --------------- -------- --- ------------- - ------------------------ --- --------------------- - ------------------------- --- ------ - -------------------- ----------------------------------------------------------------------------------------- -------------- --------------- ----------------- ------ ------------------------------------------- ------------------------------- ----- ------------------------ ----------------------------------- - --------------------- --- ------- - ---------------- ----------------- -------------- -------------- ----------------------- -----------------------------
其中，在 Swift 中，需要遵守 WKScriptMessageHandler 协议，并实现 userContentController(_:didReceive:) 方法，以处理 Javascript 代码发送的信息。
-- -------------------- ---- -------
--------- --------------- ---------------------- -
---- ----------------------- ---------------------- ------------------------ ---------- -------- ---------------- -
-- ------------ -- ----------------------- -
-- --- --- - ------------ --- ------ -
----------
-
-
-
-最后，在 Javascript 中，我们可以通过 window.webkit.messageHandlers.RNWebViewBridgeInvoke.postMessage 向原生代码发送信息。
window.webkit.messageHandlers.RNWebViewBridgeInvoke.postMessage(<data>)
在这里，<data> 可以是任何字符串，表示我们想传递的信息。
3. 添加错误处理
在通信过程中，我们也需要添加错误处理，以保证项目的稳定性。我们可以通过注册一个 “error” 回调来实现这一点。
首先，我们需要在 React Native 中将 WebView 的 onMessage 函数改为 onError 函数。
-- -------------------- ---- -------
------ ------- ----- --- ------- --------------- -
------- - ---------------- -- -
----- - ----------- - - ---------------
--------------------- ------ -- -------------
-
-------- -
------ -
----- -------- ----- - ---
--------
--------- ---- ------------------------- --
----------------------
--
-------
--
-
-而在原生代码中，我们需要实现 WKNavigationDelegate 协议，并在 webView(_:didFail:withError:) 中处理错误信息。
extension ViewController: WKNavigationDelegate {
func webView(_ webView: WKWebView, didFail navigation: WKNavigation!, withError error: Error) {
print(error.localizedDescription)
}
}4. 示例代码
以上便是使用 react-native-webview-bridge-invoke 实现 WebView 与原生代码通信的详细教程。下面是一个完整的示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- ---- - ---- ---------------
------ ------- ---- -----------------------
------ ------- ----- --- ------- --------------- -
------- - ---------------- -- -
----- - ----------- - - ---------------
--------------------- ------ -- -------------
-
-------- -
------ -
----- -------- ----- - ---
--------
--------- ---- ------------------------- --
----------------------
--
-------
--
-
--- -------------------- ---- -------
------ -----
------ ------
----- --------------- ----------------- --------------------- ---------------------- -
-------- ---- ------------- -
-------------------
--- ------ - ----------- -----------------------------------
--- --------- - --------------- --------
--- ------------- - ------------------------
--- --------------------- - -------------------------
--- ------ - -------------------- ----------------------------------------------------------------------------------------- -------------- --------------- ----------------- ------
-------------------------------------------
------------------------------- ----- ------------------------
----------------------------------- - ---------------------
--- ------- - ---------------- ----------------- -------------- --------------
-----------------------
-----------------------------
-
---- --------- -------- ---------- ------- ----------- -------------- --------- ------ ------ -
---------------------------------
-
---- ----------------------- ---------------------- ------------------------ ---------- -------- ---------------- -
-- ------------ -- ----------------------- -
-- --- --- - ------------ --- ------ -
----------
-
-
-
-以上便是一个简单的示例代码，供大家参考。当然，在实际开发中，我们还需要根据具体需求对代码进行相应的修改和完善。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005586d81e8991b448d5a6d