Nativescript получение другого (верхнего) представления из кнопки внутреннего фрейма

Содержание

Вопрос или проблема
Ответ или решение
Решение проблемы с получением других представлений в NativeScript
Причины возникновения ошибки
Шаги решения проблемы
Обновленный код функции onVerify
Итог

Вопрос или проблема

Недавно я использовал шаблон drawerapp, следуя обычной инструкции, указанной здесь: ссылка.

У меня не было проблем с его получением до развертывания. Затем я добавил новую страницу для входа:

И внес небольшие изменения в app-root.xml следующим образом:

с дополнительной частью макета, которую я хочу сделать частично видимой или скрытой.

Затем, внутри login-page.xml у меня есть эта часть, которая вызывает функцию кнопки onVerify.

Когда я внес некоторые изменения в login-page.js, особенно для функции onVerify:

 export function onVerify(args){
  var page = args.object.page;
  var form = getViewById(page, "login-form-layout");
  page.frame.navigate({
    moduleName: 'home/home-page',
    clearHistory: true,
  });

  // но код ниже не работает!
  var menuUnlogged = page.getViewById("unlogged");
  var menuLogged = page.getViewById("logged-in");

  menuUnlogged.visibility = "collapse";
  menuLogged.visibility = "visible";
}

Таким образом, когда кнопка нажата (кликнута), она должна скрыть представление Grid и сделать другое представление Grid видимым. Но на самом деле это не сработало. Приложение вылетело!

Ошибка, которую я получил, говорит мне, что есть неопределенная переменная.

TypeError: невозможно установить свойства неопределенного (устанавливая видимость).

Является ли это ссылочной переменной, которая не захватила элемент представления, или что-то еще, что я пока не понял?

Надеюсь, кто-то сможет помочь мне с этим вопросом. Заранее спасибо!

Ответ или решение

Решение проблемы с получением других представлений в NativeScript

Здравствуйте! Давайте разберемся с вопросом о получении другого (верхнего) представления из кнопки во внутреннем фрейме в приложении, созданном на основе шаблона drawerapp в NativeScript. По вашему описанию видно, что вы столкнулись с проблемой, когда при попытке изменить видимость элементов интерфейса возникала ошибка типа TypeError: cannot set properties of undefined (setting visibility).

Причины возникновения ошибки

Ошибка, которая возникает при попытке установить свойство visibility на undefined, скорее всего, связана с тем, что вы пытаетесь получить доступ к элементу интерфейса, который не создан или не загружен в текущем контексте страницы. Давайте рассмотрим несколько возможных причин и решений этой проблемы.

Шаги решения проблемы

Проверка идентификаторов элементов интерфейса:
Убедитесь, что идентификаторы unlogged и logged-in правильно указаны в вашем XML-файле. Например, если у вас есть следующие элементы:
```
<GridLayout id="unlogged" visibility="visible">
   
</GridLayout>
<GridLayout id="logged-in" visibility="collapse">
   
</GridLayout>
```
Убедитесь, что идентификаторы соответствуют тем, которые вы используете в коде.
Использование функции getViewById:
Ваша текущая реализация использует page.getViewById(), но учитывая, что вы совершаете навигацию к новой странице с помощью page.frame.navigate(), это может сбрасывать ваш текущий контекст, и значения становятся недоступными. Чтобы корректно ссылаться на элементы, вам нужно сделать следующее:
- Переместите логику, отвечающую за изменение видимости, на страницу, к которой вы переходите (home/home-page), или используйте data-binding для управления состоянием видимости.
Правильная обработка навигации:
Вместо того, чтобы выполнять навигацию и сразу же пытаться изменять элементы в предыдущем контексте, вы можете выполнить изменения в home-page, когда он будет загружен. Например, вы можете использовать onNavigatingTo в home-page.js, и передать данные о состоянии пользователя.

Обновленный код функции `onVerify`

Попробуйте изменить вашу функцию onVerify следующим образом:

export function onVerify(args) {
    var page = args.object.page;
    // Переменная для хранения состояния пользователя
    var userLoggedIn = true; // или false в зависимости от логики авторизации

    // Навигация к новой странице
    page.frame.navigate({
        moduleName: 'home/home-page',
        context: { userLoggedIn: userLoggedIn }, // Передаем контекст
        clearHistory: true,
    });
}

А для home-page.js:

import { fromObject } from "@nativescript/core/data/observable";

export function onNavigatingTo(args) {
    const page = args.object;
    const context = page.navigationContext;

    // Проверка, передан ли контекст
    if (context) {
        const menuUnlogged = page.getViewById("unlogged");
        const menuLogged = page.getViewById("logged-in");

        if (context.userLoggedIn) {
            menuUnlogged.visibility = "collapse";
            menuLogged.visibility = "visible";
        } else {
            menuUnlogged.visibility = "visible";
            menuLogged.visibility = "collapse";
        }
    }
}

Итог

С помощью этих изменении вы сможете избежать ошибок, связанных с неопределенными элементами интерфейса при изменении их видимости. Помните, что управление состоянием интерфейса эффективно реализуется через контекст навигации и привязку данных. Если у вас останутся вопросы, не стесняйтесь задавать их! Удачи в разработке вашего приложения с использованием NativeScript!