Проблема с построением динамических c BottomNavigation NS 6.5

Question

NS 6.5 был выпущен, и появилась новая функция: Dynami c Создание вкладок и нижняя навигация ...

Я последовал их примеру, но, похоже, он не работает, см. Мой код ниже в детская площадка:

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.Вы создаете «пустой» BottomNavigaiton в пределах XML. Это не нужно и может вызвать проблемы (поскольку нет инициализированных элементов tabStrip и content ). Удалите тег BottomNavigation из XML и создайте его динамически через logi с выделенным кодом c.

3. Вы создаете нижнюю навигацию с помощью выделенного кода, но нет кода, который фактически добавляет это Недавно созданный компонент в любом месте на странице. Вы можете использовать свойство content текущей страницы.

  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