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

Question

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

或者有什么好的方案可以实现Android和IOS的底部导航吗？

这是我想要实现的目标

Answer 1

您可以在 native 脚本的 TabView 中使用构建。通过使用 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'}">