在Android Webview中添加ReactJS

  • Z时代
  • 2024-01-10
  • 分类：问答

我正在使用开发Android本机应用程序WebView。我WebView通过启用Javascript和添加Javascript接口，使用HTML文件通过Javascript将UI功能和给定的功能加载到UI元素中。

WebView myWeb=(WebView)findViewById(R.id.webView1);
    myWeb.getSettings().setJavaScriptEnabled(true);
    myWeb.getSettings().setLoadWithOverviewMode(true);
    myWeb.loadUrl("file:///android_asset/webview.html");
    myWeb.addJavascriptInterface(new Object()
    {
        @JavascriptInterface          
        public void recognizeIt(String message)
        {
            Toast.makeText(WebViewActivity.this, message,
                    Toast.LENGTH_LONG).show();
            Intent Intent = new Intent(WebViewActivity.this, StartActivity.class);
            startActivity(Intent);
        }
    }, "Android");

下面是我的html文件。

<html>
    <head>
          <script type="text/javascript">
                function shareIt(toast) {
                   var uname=document.getElementById("message").value;
                   Android.recognizeIt(uname);
                }
        </script>
    </head>
    <body>
        <label id="username"><b>Username</b></label>
        <input type="text" placeholder="Enter Username" name="uname" required id="message">
        <button type="button" onclick="shareIt('message')"> SEND </button>
    </body>
</html>

现在，我想使用ReactJS在我的应用程序中创建UI屏幕，而不是html文件。我尝试搜索相同的内容，但未找到任何样本。如果有人可以在这里帮助/指导我，我将不胜感激。

回答：

您编写的任何JavaScript React应用程序都可以加载到Android

WebView中。只需尝试遵循https://reactjs.org/上的基本教程即可。然后将这些应用程序托管在网络服务器上，您便可以将它们加载到Android

WebView中。

为了确保正确配置了Android WebView，您可以尝试将现有的React应用程序加载到WebView中。例如，尝试调用：

myWeb.loadUrl("https://ahfarmer.github.io/calculator/");

加载正常吗？如果是，则您的WebView已配置为能够显示您自己的React应用程序。

为了简单地运行Web服务器以从包含html文件的目录中提供文件，请使用以下命令：

browser-sync start --server --https

要安装浏览器同步，请按照https://browsersync.io/上的说明进行操作

以上是 在Android Webview中添加ReactJS 的全部内容， 来源链接： utcz.com/qa/410338.html

回到顶部