Nativescript中的底部栏导航不起作用

Question

我正在使用https://market.nativescript.org/plugins/nativescript-bottom-navigation#bottom-navigation-bar使用Angular实现底部导航栏。我尝试了他们提供的步骤，但不幸的是它没有用。我收到类似can't find variable MDCBottomNavigationBarDelegate的错误。 我被困在这里，我真的怀疑Nativescript是否比其他流行的框架好。如果这里有人知道此问题，请提供帮助。

或者是否有任何好的解决方案来实现Android和IOS的底部导航？

这是我要实现的目标

Answer 1

您可以在本机脚本的TabView中使用build。通过使用androidTabsPosition="bottom"，您可以为其设置位置

<TabView
  androidTabsPosition="bottom"
  androidSelectedTabHighlightColor="#7c015d"
  selectedTabTextColor="#7c015d"
>
  <StackLayout *tabItem="{ title: 'Today' }">
    <router-outlet name="today"> </router-outlet>
  </StackLayout>
  <StackLayout *tabItem="{ title: 'Current Challenge' }">
    <router-outlet name="currentChallenge"> </router-outlet>
  </StackLayout>
</TabView>

在您的组件中

import { Component, OnInit } from "@angular/core";
import { RouterExtensions } from "nativescript-angular/router";
import { ActivatedRoute } from "@angular/router";

  constructor(
    private router: RouterExtensions,
    private active: ActivatedRoute
  ) {}

  ngOnInit() {
    this.router.navigate(
      [
        {
          outlets: { currentChallenge: ["current-challenge"], today: ["today"] }
        }
      ],
      { relativeTo: this.active }
    );
  }

更新，您可以像这样设置图标

<StackLayout *tabItem="{title: 'Title', iconSource:'res://icon'}">