javascript - 构建动态 BottomNavigation NS 6.5 的问题

Question

NS 6.5已经发布，有一个新功能:动态创建选项卡和底部导航...

我按照他们的示例进行操作，但似乎不起作用，请在 Playground 上查看下面的代码:

https://play.nativescript.org/?template=play-js&id=SoGnxo&v=6

如果我做错了什么，请帮忙纠正。

提前非常感谢。

Answer 1

您的代码存在多个问题。以下是所有内容的解释:

1.您的导入有误。例如，缺少 StackLayout 导入以及 BottomNavigation 类的导入错误。

const Color = require("tns-core-modules/color").Color;
const Label = require("tns-core-modules/ui/label").Label;
const StackLayout = require("tns-core-modules/ui/layouts/stack-layout").StackLayout;
const BottomNavigation = require("tns-core-modules/ui/bottom-navigation").BottomNavigation;
const TabStrip = require("tns-core-modules/ui/bottom-navigation").TabStrip;
const TabStripItem = require("tns-core-modules/ui/bottom-navigation").TabStripItem;
const TabContentItem = require("tns-core-modules/ui/bottom-navigation").TabContentItem;

2.您正在 XML 中创建一个“空”BottomNavigaiton。这是不需要的，并且可能会导致麻烦(因为没有初始化 tabStrip 和 content 项目)。从 XML 中删除 BottomNavigation 标记，并通过代码隐藏逻辑动态创建它。

3，您正在通过代码隐藏创建底部导航，但没有代码实际将这个新创建的组件添加到页面上的任何位置。您可以使用当前页面的内容属性。

  var bottomNavigaiton = new BottomNavigation();

  /* TabStrip creating and adding to BottomNavigation.tabStrip */
  let myTabStrip = new TabStrip();
  let tabStripItem1 = new TabStripItem();
  tabStripItem1.title = "Tab 1";

  // To use icon font, you need to have a fonts folder with FontAwesome added in the project
  // tabStripItem1.iconSource = `font://${String.fromCharCode(0xf053)}`;
  // tabStripItem1.iconClass = "fas"; // e.g., Font Awesome
  let tabStripItem2 = new TabStripItem();
  tabStripItem2.title = "Tab 2";
  // To use icon font, you need to have a fonts folder with FontAwesome added in the project
  // tabStripItem2.iconSource = `font://${String.fromCharCode(0xf070)}`;
  // tabStripItem2.iconClass = "fas"; // e.g., Font Awesome
  myTabStrip.items = [tabStripItem1, tabStripItem2];
  bottomNavigaiton.tabStrip = myTabStrip;

  /* TabContent items creating and adding to BottomNavigation.items */
  let tabContentItem1 = new TabContentItem();
  tabContentItem1.content = createContent(1);
  let tabContentItem2 = new TabContentItem();
  tabContentItem2.content = createContent(2);
  let contentItems = [tabContentItem1, tabContentItem2];
  bottomNavigaiton.items = contentItems;

  /* 
    Adding the created bottom navigation to the Page content
  */
  page.content = bottomNavigaiton;

您没有包含图标字体 (FontAwesome) 的字体文件夹。

在此处查看整个修改后的示例 https://play.nativescript.org/?template=play-js&id=SoGnxo&v=16