Svelte Native 中的 BottomNavigation 组件

Question

我目前正在致力于将 BottomNavigation 组件集成到我的 Svelte Native 应用程序中，但遇到了一些困难。看来 BottomNavigation 已从核心项目中弃用，并已被社区插件 (@nativescript-community/ui-material-bottom-navigation) 取代。安装此社区插件后，我遇到了 TypeScript 错误，表明组件扩展不匹配 - TypeScript 需要一个与库中使用的不同的基本组件。

不幸的是，我无法在网上找到任何解决此问题的文档或工作示例。有人能帮助我吗？也许有一个可行的解决方法、一个替代库或一个我可以使用的组件？也许我也只是错过了实施中的一个步骤，任何指导将不胜感激。

提前感谢您的时间和帮助！

Answer 1

我设法使用这些示例来做到这一点：

• https://github.com/nativescript-community/ui-material-components/issues/359
• https://github.com/nativescript-community/ui-material-components/issues/359

但是 Svelte 原生应该有例子：/ Svelte Native 实现要好得多，因为您甚至不需要导入任何内容：https://svelte-native.technology/docs#bottom-navigation。 他们应该保留它！ :( 另外，文档是集中的，现在他们弃用了它们的实现，您需要尝试找到大多数情况下不存在的示例:/

<script>
    import { registerNativeViewElement } from "svelte-native/dom";
    import {
        BottomNavigation,
        TabStrip,
        TabStripItem,
        TabContentItem,
      } from "@nativescript-community/ui-material-bottom-navigation";

    registerNativeViewElement("bottomNavigation", () => BottomNavigation);
    registerNativeViewElement("tabStrip", () => TabStrip);
    registerNativeViewElement("tabStripItem", () => TabStripItem);
    registerNativeViewElement("tabContentItem", () => TabContentItem);
</script>

<page>


  <bottomNavigation selectedIndex="1">
    <!-- The bottom tab UI is created via TabStrip (the containier) and TabStripItem (for each tab)-->
    <tabStrip backgroundColor="#C8F7C5">
      <tabStripItem>
        <label text="Home"></label>
        <image src="font://&#xf015;" class="fas"></image>
      </tabStripItem>
      <tabStripItem class="special">
        <label text="Account"></label>
        <image src="font://&#xf007;" class="fas"></image>
      </tabStripItem>
      <tabStripItem class="special">
        <label text="Search"></label>
        <image src="font://&#xf00e;" class="fas"></image>
      </tabStripItem>
    </tabStrip>

    <!-- The number of TabContentItem components should corespond to the number of TabStripItem components -->
    <tabContentItem>
      <gridLayout>
        <label text="Home Page" class="h2 text-center"></label>
      </gridLayout>
    </tabContentItem>
    <tabContentItem>
      <gridLayout>
        <label text="Account Page" class="h2 text-center"></label>
      </gridLayout>
    </tabContentItem>
    <tabContentItem>
      <gridLayout>
        <label text="Search Page" class="h2 text-center"></label>
      </gridLayout>
    </tabContentItem>
  </bottomNavigation>
</page>