android - ReactJS 与原生 Android 中的 Webview 通信 ('Android' 未定义 no-undef)

Question

我用 ReactJS (不是 React Native - 非常重要)编写了 web 部件。我还有一个简单的 Android 应用程序，它包含一个 WebView，我在其中打开一个在 ReactJS 上运行的网站。 Android 原生 WebView(打开 ReactJS 网站)和 ReactJS 网站之间是否有适当的通信方式？

我已经完成了这个Facebook React Native Communication ，但这是 React Native 的典型案例。这意味着，这在通过 ReactActivity 等扩展 Activity 的原生 Android 应用程序中是无用的......

这是 ReactJS 源代码，我想在其中执行 JS 调用 Mobile.showToast("Test")(不仅在这里，在许多 .tsx 文件中)，但它没有编译。编译错误是'Mobile' is not defined no-undef:

import * as React from "react";
import {
  Button,
} from "components";

class Login extends React.PureComponent {
  public render() {
    return (
      <Fullscreen>
        <Content>
          <Button onClick={this.handleRedirect} fullWidth>
        </Content>
      </Fullscreen>
    );
  }

  private handleRedirect = () => {
    //Here I wanted to call JS call for Android JavascriptInterface interrogation
    Mobile.showToast("Test");
  };
}

export default Login;

这是附加 javascriptInterface + JS 调用的源代码(在这个例子中只有调用是 showToast):

webView.addJavascriptInterface(new MobileAppInterface(getContext()), "Mobile");


import android.content.Context;
import android.webkit.JavascriptInterface;
import android.widget.Toast;

public class MobileAppInterface {

    Context mContext;

    /**
     * Instantiate the interface and set the context
     */
    public MobileAppInterface(Context c) {
        mContext = c;
    }

    /**
     * Show a toast from the web page
     */
    @JavascriptInterface
    public void showToast(String toast) {
        Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();
    }
}

Answer 1

在您的 React 方法中，由于您将 JavascriptInterface 命名为“Mobile”，因此您需要修改您的方法以使用 window.Mobile.showToast("Test"); 由于接口(interface)被导出到全局 window 对象:

class Login extends React.PureComponent {

    ...

    private handleRedirect = () => {
        if (window.Mobile)
            window.Mobile.showToast("Test");
    };
}

例如，如果您将 JavascriptInterface 命名为“Android”，

webView.addJavascriptInterface(new MobileAppInterface(getContext()), "Android");

那么你的方法体需要如下:

class Login extends React.PureComponent {

    ...

    private handleRedirect = () => {
        if (window.Android)
            window.Android.showToast("Test");
    };
}

来源

1. 全局窗口对象 https://developer.mozilla.org/en-US/docs/Glossary/Global_object