在Android Webview中添加ReactJS

小编典典

在Android Webview中添加ReactJS

reactjs

我正在使用开发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文件。我尝试搜索相同的内容，但未找到任何样本。如果有人可以在这里帮助/指导我，我将不胜感激。

阅读 514

2020-07-22

共1个答案

小编典典

您编写的任何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/上的说明进行操作

2020-07-22