Настройте панель навигации и строку состояния iOS с помощью NativeScript

Поскольку я все больше и больше узнавал о  NativeScript , одной из первых задач, которую я действительно увлекся, было изучение того, как настроить панель навигации для приложения iOS. NativeScript имеет компонент Navbar в дорожной карте, но пока он требует определенных знаний о базовой реализации iOS UINavigationControllers ,  UIViewControllers  и тому подобного. Но не бойся! Я выдержал коварные воды StackOverflow и документов Objective-C и вышел победителем и невредимым.

В этой статье я рассмотрю несколько наиболее распространенных настроек, которые вам, возможно, придется внести в панель навигации или строку состояния. Хотя NativeScript является кроссплатформенным фреймворком, эти настройки применимы именно к iOS. Однако большинство пунктов, которые я расскажу здесь, также могут быть реализованы для Android.

В процессе обучения настройке панели навигации я черпал вдохновение из  этого поста Саймона Н.Г. в AppCoda . Это фантастическая статья, в которой рассказывается о том, что можно сделать для панели навигации iOS и строки состояния с точки зрения Objective-C. Мне очень понравилось то, как был выложен пост, поэтому я собираюсь использовать примерно тот же формат, чтобы рассказать о панели навигации / строке состояния iOS в NativeScript:

• Отображение и скрытие панели навигации
• Установка заголовка панели навигации
• Скрытие кнопки Назад
• Изменение цвета фона панели навигации
• Изменение цвета текста заголовка
• Изменение стиля текста заголовка
• Установка стиля строки состояния
• Настройка цвета кнопки «Назад»
• Скрытие кнопки Назад
• Добавление новых элементов панели кнопок

NativeScript Навигация по умолчанию

NativeScript рассматривает начальную страницу, которая загружается как корневой контроллер представления. Любое представление, к которому осуществляется переход, помещается в очередь навигации с помощью UINavigationController. Это означает, что на первом экране вы вообще не увидите панель навигации. При каждом последующем просмотре вы увидите его, включая кнопку «<Назад».

Для большинства настроек требуется ссылка на UINavigationController или текущий UIViewController. Вы можете получить ссылку на этот контроллер из  frames модуля tns.

<Page xmlns="http://www.nativescript.org/tns.xsd" loaded="loaded" >
  <!-- ... -->
</Page>

exports.loaded = function(args) {
  var page = args.object;
  if (page.ios) {
    var controller = frameModule.topmost().ios.controller;
  }
};

// hide the navbar
frameModule.topmost().ios.navBarVisibility = "never";

// show the navbar
frameModule.topmost().ios.navBarVisibility = "always";

// set the title
page.ios.title = 'Instaclone';

var controller = frameModule.topmost().ios.controller;

// get the view controller navigation item
var navigationItem = controller.visibleViewController.navigationItem;

// hide back button
navigationItem.setHidesBackButtonAnimated(true, false);

// set bar color to system blue constant
navigationBar.barTintColor = UIColor.blueColor();

// set bar color to a nice dark blue with RGBA
navigationBar.barTintColor = UIColor.colorWithRedGreenBlueAlpha(0, 0.24, 0.45, 1);

// change title color
navigationBar.titleTextAttributes = new NSDictionary([UIColor.whiteColor()], [NSForegroundColorAttributeName]);

// change title color and drop the shadow like it's hot
var shadow = new NSShadow();
shadow.shadowColor = UIColor.blackColor();
shadow.shadowOffset = CGSizeMake(1,2);
navigationBar.titleTextAttributes = new NSDictionary([UIColor.whiteColor(), shadow], [NSForegroundColorAttributeName, NSShadowAttributeName]);

/*  change status bar style
    UIStatusBarStyleDefault,
    UIStatusBarStyleLightContent,
    UIStatusBarStyleBlackTranslucent,
    UIStatusBarStyleBlackOpaque */
navigationBar.barStyle = 1;

navigationBar.tintColor = UIColor.whiteColor();

<Page>
  <Page.optionsMenu>
    <MenuItem text="share" tap="shareAction" />
  </Page.optionsMenu>
</Page>

/*  Create bar button item

    first argument is what icon to show:

    UIBarButtonSystemItemDone,
    UIBarButtonSystemItemCancel,
    UIBarButtonSystemItemEdit,
    UIBarButtonSystemItemSave,
    UIBarButtonSystemItemAdd,
    UIBarButtonSystemItemFlexibleSpace,
    UIBarButtonSystemItemFixedSpace,
    UIBarButtonSystemItemCompose,
    UIBarButtonSystemItemReply,
    UIBarButtonSystemItemAction,
    UIBarButtonSystemItemOrganize,
    UIBarButtonSystemItemBookmarks,
    UIBarButtonSystemItemSearch,
    UIBarButtonSystemItemRefresh,
    UIBarButtonSystemItemStop,
    UIBarButtonSystemItemCamera,
    UIBarButtonSystemItemTrash,
    UIBarButtonSystemItemPlay,
    UIBarButtonSystemItemPause,
    UIBarButtonSystemItemRewind,
    UIBarButtonSystemItemFastForward,
    UIBarButtonSystemItemUndo,
    UIBarButtonSystemItemRedo,
    UIBarButtonSystemItemPageCurl */

// creates item with UIBarButtonSystemItemAction icon
var shareItem = new UIBarButtonItem(UIBarButtonSystemItem.UIBarButtonSystemItemAction, null, null);

// add item to navigation bar
var actionButtonItems = [shareItem];
navigationItem.rightBarButtonItems = actionButtonItems;