NativeScript Webview newb ie вопросов

Question

Я экспериментирую с использованием NativeScript, чтобы ускорить процесс переноса существующего приложения Android на iOS. Данное приложение использует множество манипуляций с SVG в веб-обозрении Cordova. Для простоты я хочу перенести весь свой существующий код на стороне Webview - по сути, весь существующий Cordova www folder и его содержимое - в новое приложение NativeScript. WebView взаимодействует с пользовательским плагином Cordova, который я использую, чтобы общаться с моими серверами для выполнения таких задач, как отображение новых SVG, отслеживание действий пользователя и т. Д. c.

Если я справлюсь с этими проблемами при прорезывании зубов, я подумываю использовать этот компонент для реализации двунаправленной связи между текущим кодом веб-просмотра JS и новым внутренним интерфейсом NativeScript, который заменит мой текущий плагин Cordova. Кто-то здесь обязательно скажет мне, что мне не нужно этого делать ... Тем не менее, это означало бы выбросить ребенка с водой и переписать весь мой текущий код Webview ES6 / JS / CSS.

Для меня это первый день с NativeScript, и я столкнулся с несколькими проблемами.

• Я обнаружил, что не могу избавиться от ActionBar, даже если я следовал инструкции здесь и установите панель действий скрытыми.

• Я могу использовать следующую разметку в home.component.html

для отображения внешнего веб-контента. Однако я действительно хочу показать локальный файл HTML, который находится в www folder в следующей иерархии папок

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

Однако, когда я использую разметку

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

Мне показывают сообщение об ошибке

Веб-страница в файле: ///data/data/com.example.myapp/files/app/www/index.html недоступна.

Я был бы очень признателен всем, кто мог бы сказать мне, что я делаю здесь неправильно, а также, как я могу избавиться от этой панели действий, которая в настоящее время показывает название приложения.

Answer 1

Об использовании локального HTML файла

Ваш локальный HTML файл распознается Webpack (который включен по умолчанию в NativeScript)? Попробуйте явно добавить локальный файл HTML в файл webpack.config. js. Таким образом, Webpack «узнает», что ему придется также связать этот файл.

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

Пример здесь

О сокрытии ActionBar

NativeScript Core * только 1020 *: попробуйте скрыть панель действий непосредственно для фрейма, содержащего страницу. См. Соответствующую документацию здесь

NativeScript Angular: page-router-outlet будет иметь панель действий по умолчанию (вы можете скрыть ее используя страницу DI, как сделано здесь ). В противном случае вы можете создать router-outlet (вместо page-router-outlet). router-outler не будет иметь специфицированный для мобильных устройств c ActionBar.