Javascript 构建动态底部导航的问题6.5

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

我遵循了他们的示例，但似乎不起作用，请参见下面在操场上的代码：

如果我做错了什么，请帮忙修理

---

非常感谢。您的代码存在多个问题。以下是所有这些问题的解释：

1.你有错误的进口。例如，BottomNavigation类缺少StackLayout导入，并且导入错误

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。这是不需要的，可能会引起麻烦（因为没有初始化的选项卡条和内容项）。从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;

您没有包含图标字体（Fontsome）的字体文件夹

---

在这里查看整个修订的示例

非常感谢@NickIliev，当我单击TabStripItem时，tabContentItem似乎没有改变，但因为createContent函数需要一个数字，而您要传递一个字符串，所以它总是为不同的内容页设置相同的文本。