注入 Javascript 函数在 Android React Native WebView 中不起作用，但在 iOS React Native 中工作正常 - Javascript

在 React Native 应用中，WebView 组件是一个十分常用的组件，可以展示网页并实现交互。然而，有时在 Android 系统和 iOS 系统中对 WebView 使用不同的方法时，可能会出现某些问题。本文将介绍注入 Javascript 函数在 Android React Native WebView 中不起作用，但在 iOS React Native 中工作正常的问题。

问题描述

在 React Native 应用中，如果想要在 WebView 中注入一个 Javascript 函数，可以通过 Webview 组件的 injectedJavaScript 属性来实现。具体代码如下：

const injectedJavaScript = `
    function myFunction() {
        console.log('Hello, world!');
    }
`;

<WebView
    ...
    injectedJavaScript={injectedJavaScript}
/>

然而，在 Android 系统中，该方法有时不起作用。即使在调试工具中查看注入的代码已经加载到页面中，该函数也无法在 WebView 中被调用。

原因分析

该问题的原因可能是由于 Android 和 iOS 系统在注入 Javascript 函数时的机制不同。

在 iOS 系统中，Webview 组件的 injectedJavaScript 属性将在 WebView 加载页面时被注入。而在 Android 系统中，WebView 在加载页面时是异步加载的，因此 injectedJavaScript 属性注入的 Javascript 代码可能会在 WebView 加载完成之前被加载，导致注入的函数无法在 WebView 中调用。

解决方案

为了解决该问题，我们可以在 WebView 组件中使用 onNavigationStateChange 属性来捕获 WebView 加载完成的事件。在 Android 系统中，我们可以在 WebView 加载完成之后再注入 Javascript 代码。具体代码如下：

const injectedJavaScript = `
    function myFunction() {
        console.log('Hello, world!');
    }
`;

onNavigationStateChange = navState => {
    if (navState.loading === false) {
        this.refs.WebView.injectJavaScript(injectedJavaScript);
    }
};

<WebView
    ...
    onNavigationStateChange={this.onNavigationStateChange.bind(this)}
    ref="WebView"
/>

这样，在 Android 系统中，injectedJavaScript 属性中的代码将在 WebView 加载完成之后被注入，从而能够在 WebView 中被成功调用。

总结

本文介绍了在 Android React Native WebView 中注入 Javascript 函数不起作用的问题，并提供了解决方案。如果您遇到了类似问题，可以参考本文提供的方法进行修复。