React Native WebView 调用本地 JS 代码

在 React Native 应用中，WebView 组件可以用于加载网页或者嵌入第三方网页，但是有时候我们需要在 WebView 中调用本地 JS 代码来实现一些自定义功能。本文将详细介绍如何在 React Native WebView 中调用本地 JS 代码，并提供示例代码和指导意义。

WebView 组件简介

WebView 组件是 React Native 中的一个核心组件，它可以用于加载网页或者嵌入第三方网页。WebView 组件有以下几个属性：

• source：指定 WebView 要加载的网页地址或者 HTML 代码。
• javaScriptEnabled：是否启用 WebView 中的 JavaScript 代码。
• onMessage：当 WebView 中的 JS 代码通过 window.postMessage() 函数向 React Native 发送消息时，会触发这个事件。
• injectedJavaScript：在 WebView 加载完网页后，会自动执行这段 JS 代码。

在 WebView 中调用本地 JS 代码

有时候我们需要在 WebView 中调用本地 JS 代码，比如在 WebView 中实现一些自定义功能或者与 React Native 应用进行交互。为了实现这个功能，我们需要使用 WebView 中的 injectJavaScript() 函数来注入 JS 代码，然后在 WebView 中调用这个代码。

以下是一个简单的示例代码，它会在 WebView 中加载一个网页，并在网页中调用一个本地 JS 函数：

// www.javascriptcn.com code example
import React, { useRef } from 'react';
import { View, Text, WebView } from 'react-native';

const App = () => {
  const webViewRef = useRef(null);

  const handleLoad = () => {
    const jsCode = `
      function hello() {
        alert('Hello from React Native!');
      }
    `;
    webViewRef.current.injectJavaScript(jsCode);
    webViewRef.current.postMessage('');
  };

  const handleMessage = (event) => {
    const { data } = event.nativeEvent;
    if (data === 'hello') {
      webViewRef.current.injectJavaScript('hello();');
    }
  };

  return (
    <View style={{ flex: 1 }}>
      <Text>Hello World!</Text>
      <WebView
        ref={webViewRef}
        source={{ uri: 'https://www.google.com' }}
        javaScriptEnabled={true}
        onLoad={handleLoad}
        onMessage={handleMessage}
      />
    </View>
  );
};

export default App;

在这个示例代码中，我们首先定义了一个名为 hello() 的本地 JS 函数，它会在 WebView 中弹出一个对话框。然后在 handleLoad() 函数中，我们使用 injectJavaScript() 函数注入这个 JS 代码，并使用 postMessage() 函数向 WebView 发送一个空消息，以便在 WebView 中触发 onMessage() 事件。最后在 handleMessage() 函数中，我们监听 WebView 中的消息，并在收到 'hello' 消息时调用 hello() 函数。

指导意义

React Native WebView 组件的能力非常强大，可以用于加载网页或者嵌入第三方网页，还可以与本地 JS 代码进行交互，为我们提供了很多自定义功能的可能性。在使用 WebView 组件时，我们需要注意以下几点：

• 启用 JavaScript：默认情况下，WebView 中的 JavaScript 是被禁用的，我们需要在组件中设置 javaScriptEnabled 属性为 true，才能正常运行 JS 代码。
• 安全性：由于 WebView 组件可以加载任意网页，所以我们需要注意安全性问题，避免加载恶意网页或者注入恶意 JS 代码。
• 性能：WebView 组件的性能比较差，加载网页的速度比较慢，而且会占用较多的内存和 CPU 资源，所以我们需要尽量避免在应用中频繁使用 WebView 组件。

总的来说，React Native WebView 组件是一个非常有用的组件，可以用于实现很多自定义功能，但是在使用时需要注意安全性和性能问题，以确保应用的稳定性和安全性。

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