NativeScript Webview 新手问题

Question

我正在尝试使用 NativeScript 来加快将现有 Android 应用程序移植到 iOS 的过程。有问题的应用程序在 Cordova webview 中使用了大量的 SVG 操作。为了简单起见，我想将所有现有的 Webview 端代码——本质上是整个现有的 Cordova www 文件夹及其内容——移植到新的 NativeScript 应用程序。 WebView 与自定义 Cordova 插件对话，我用它与我的服务器对话以执行诸如显示新 SVG、跟踪用户操作等操作。

如果我能解决这些初期问题，我正在考虑使用 this component 实现 bi-direction 当前 webview JS 代码与将替换我当前 Cordova 插件的新 NativeScript 后端之间的通信.这里肯定有人会告诉我，我不需要那样做......然而，这样做意味着把婴儿连同洗澡水一起倒掉并重写我当前的所有 Webview ES6/JS/CSS 代码。

这几乎是我使用 NativeScript 的第一天，我运行遇到了一些问题。

我发现我无法摆脱 ActionBar，即使我已经按照 instructions here 并将操作栏设置为隐藏。
我可以在 home.component.html
中使用以下标记

显示外部网页内容。但是，我真正想要做的是显示位于以下文件夹层次结构

中的 www 文件夹中的本地 HTML 文件

app
|
 ____home
|
 ____www
      |
       ______ index.html
      |
       ______css
      |
       ______ tpl
      |
       .....

但是，当我使用标记时

<Page actionBarHidden="true" >
 <WebView src="~/www/index.html"></WebView>
</Page>

我看到了错误消息

The webpage at file:///data/data/com.example.myapp/files/app/www/index.html is not available.

如果有人能告诉我我在这里做错了什么，我将不胜感激 - 以及我如何摆脱当前显示应用程序标题的操作栏。

Answer 1

关于使用本地HTML文件

您的本地 HTML 文件是否被 Webpack 识别（在 NativeScript 中默认启用）？尝试将本地 HTML 文件显式添加到您的 webpack.config.js 文件。这样 Webpack 就会 "know" 它也必须捆绑这个文件。

new CopyWebpackPlugin([
    { from: { glob: "<path-to-your-custom-file-here>/index.html" } }, // HERE
    { from: { glob: "fonts/**" } },
    { from: { glob: "**/*.jpg" } },
    { from: { glob: "**/*.png" } },
]

示例here

关于隐藏ActionBar

仅限

NativeScript Core：尝试直接隐藏包含页面的框架的操作栏。请参阅相关文档 here

NativeScript Angular: page-router-outlet 默认会有一个操作栏（你可以隐藏它通过使用页面 DI 完成 here)。否则，您可以创建 router-outlet（而不是 page-router-outlet）。 router-outler 将没有移动设备专用的 ActionBar。

NativeScript Webview 新手问题

NativeScript Webview newbie questions

webview

nativescript