构建动态 BottomNavigation NS 6.5 的问题

Question

NS 6.5 已发布，新增功能：动态创建标签和底部导航...

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

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

如果我做错了什么，请帮助修复。

非常感谢。

Answer 1

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

1.You 导入错误。例如，缺少 StackLayout 导入以及 BottomNavigation class.

的错误导入

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.You 正在 XML 中创建 "empty" 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

构建动态 BottomNavigation NS 6.5 的问题

Problem with building dynamic BottomNavigation NS 6.5

javascript

nativescript