Js native это: Что Такое React Native

Posted:

Авг 14, 2023

Comments:

Js native это: Что Такое React Native | JavaScript Camp

Содержание

5 причин изучить React Native JavaScript Framework

React Native — это фреймворк JavaScript, используемый для разработки кроссплатформенных мобильных приложений. Если вы хотите создать приложение на платформах Android и iOS, но у вас нет времени или средств для разработки приложений для обеих платформ отдельно, React Native идеально подходит для вас.

Несколько популярных приложений, таких как Instagram, Airbnb, Walmart, UberEats, Tesla, Skype и т.д., уже использовали этот фреймворк. React Native предоставляет все основные и передовые методы разработки гибридных мобильных приложений. Давайте рассмотрим пять причин, по которым вам следует использовать React Native для разработки мобильных приложений.

1. Единая кодовая база для Android и iOS

React Native позволяет писать код один раз и запускать как на Android, так и на iOS. Кодовая база будет одинаковой для обеих платформ, поэтому вам не придется тратить деньги и время на два проекта разработки.

Поскольку React Native имеет открытый исходный код и способствует повторному использованию, вы можете повторно использовать компоненты в любое время на любом уровне, не переписывая его и не перекомпилируя приложение.

2. Возможность повторного использования

Теперь поговорим о возможности повторного использования. React Native приносит блоки, которые состоят из повторно используемых «нативных компонентов». Почти все компоненты Android и iOS имеют свои аналоги в React Native. Все эти компоненты компилируются непосредственно в нативные приложения и, таким образом, позволяют разработчикам поддерживать внешний вид платформы.

Ранее в гибридных приложениях было невозможно получить структуру, специфичную для компонента. Но с React Native эта структура позволяет разработчикам создавать приложения, используя гибкие веб-методологии.

С другой стороны, React Native также позволяет разработчикам добавлять компоненты Native в код своих существующих приложений. Им не придется кодировать с нуля, чтобы преобразовать существующее мобильное приложение в приложение React Native.

3. Производительность

React Native сокращает цикл разработки, позволяет разрабатывать приложения очень быстро и позволяет доставлять приложения максимально быстро. Он использует библиотеку ReactJS UI, разработанную Facebook для пользовательских интерфейсов. В то время как собственные приложения работают на центральном процессоре, React Native использует графический процессор.

Он поставляется с уникальной функцией под названием «живая перезагрузка», которая позволяет просматривать последние изменения кода сразу, разбивая экран на две части. Первый показывает код, а второй показывает результат кода в кадре мобильного телефона. В целом, с помощью React Native компании могут сократить расходы на разработку почти на 50% без ущерба для качества или производительности.

4. Ориентация на пользовательский интерфейс

React Native — полностью ориентированный на пользовательский интерфейс. Декларативный API значительно упрощает понимание ваших требований и прогнозирование пользовательского интерфейса. Декларативный стиль позволяет вам контролировать поток и состояние в вашем приложении, говоря: «Это должно выглядеть так». Вам больше не придется беспокоиться о деталях реализации.

5. Совместимость с сторонними плагинами

Добавление аппаратных возможностей устройства в приложение является одним из наиболее распространенных требований в наши дни. В отличие от функций WebView, React Native позволяет напрямую связать плагин с собственным модулем через инфраструктуру. Это приводит к более плавному запуску приложения, более быстрой загрузке и меньшим требованиям к памяти.

А вы знали, что это написано на JS?

Главная
|
Все статьи
|
Дневник студента

Время чтения статьи
~2 минуты

Статья написана студентом Хекслета. Мнение автора может не совпадать с позицией редакции

JavaScript — это язык, который прошел долгий путь с момента своего появления в 1995 году. Он превратился из простого языка сценариев в мощный и универсальный язык программирования, который можно использовать для всего: от веб-разработки до программирования на стороне сервера. Однако, несмотря на многочисленные достижения, у JavaScript по-прежнему плохая репутация в некоторых кругах, поскольку его часто отвергают как язык, пригодный только для простых задач.

Но правда в том, что JavaScript — это язык, который можно использовать для создания невероятно сложных и изощренных приложений, и существует множество примеров кода JavaScript, о котором вы никогда бы не подумали, что он написан на JS.

Одним из примеров этого является игровая платформа Steam, созданная с использованием JavaScript. Steam — это огромная платформа, на которой размещены тысячи игр и миллионы пользователей, но большинство людей никогда бы не догадались, что она была создана с использованием JavaScript. Платформа невероятно быстрая и отзывчивая, а пользовательский интерфейс гладкий и современный, и все это благодаря мощи JavaScript.

Еще один пример неожиданного использования JavaScript — разработка настольных приложений. Electron — это популярная платформа, которая позволяет разработчикам использовать веб-технологии, такие как HTML, CSS и JavaScript, для создания настольных приложений, которые могут работать в Windows, macOS и Linux. Некоторые известные примеры приложений, созданных с использованием Electron, включают Slack, Discord, Microsoft Teams, Visual Studio Code, Figma и др. Полный список можете найти на сайте Electron.

JavaScript также используется при разработке мобильных приложений. React Native — это популярный фреймворк, который позволяет разработчикам использовать JavaScript для создания нативных мобильных приложений для iOS и Android. Это означает, что разработчики могут создавать мобильные приложения, которые выглядят так же, как нативные приложения, но с дополнительным преимуществом возможности использовать единую кодовую базу для обеих платформ.

Даже в мире искусственного интеллекта и машинного обучения JavaScript оставляет свой след. TensorFlow.js — это библиотека, которая позволяет разработчикам использовать JavaScript для создания и обучения моделей машинного обучения прямо в браузере. Это означает, что разработчики могут создавать мощные приложения ИИ, не беспокоясь о настройке сложной инфраструктуры или изучении новых языков.

В заключение, JavaScript — это язык, который часто недооценивают, но он способен на гораздо большее, чем многие думают. От разработки игр до настольных приложений и мобильных приложений, искусственного интеллекта и машинного обучения — JavaScript используется способами, которые были бы немыслимы всего несколько лет назад. Поэтому в следующий раз, когда вы услышите, как кто-то отвергает JavaScript как простой язык сценариев, помните, что этот язык гораздо глубже, чем кажется на первый взгляд.

Александр Куманцев
14 марта 2023

Рекомендуемые программы

профессия

•
от 6 300 ₽ в месяц

Фронтенд-разработчик

Разработка фронтенд-компонентов для веб-приложений

10 месяцев
•

с нуля

Старт
1 июня

профессия

•
от 5 025 ₽ в месяц

Аналитик данных

Сбор, анализ и интерпретация данных

9 месяцев
•

с нуля

Старт
1 июня

профессия

•
от 6 300 ₽ в месяц

Python-разработчик

Разработка веб-приложений на Django

10 месяцев
•

с нуля

Старт
1 июня

профессия

•
от 6 300 ₽ в месяц

Java-разработчик

Разработка приложений на языке Java

10 месяцев
•

с нуля

Старт
1 июня

профессия

•
от 6 300 ₽ в месяц

PHP-разработчик

Разработка веб-приложений на Laravel

10 месяцев
•

с нуля

Старт
1 июня

профессия

•
от 6 183 ₽ в месяц

Инженер по тестированию

Ручное тестирование веб-приложений

4 месяца
•

с нуля

Старт
1 июня

профессия

•
от 6 300 ₽ в месяц

Node. js-разработчик

Разработка бэкенд-компонентов для веб-приложений

10 месяцев
•

с нуля

Старт
1 июня

профессия

•
от 10 080 ₽ в месяц

Fullstack-разработчик

Разработка фронтенд- и бэкенд-компонентов для веб-приложений

16 месяцев
•

с нуля

Старт
1 июня

профессия

•
от 5 840 ₽ в месяц

Разработчик на Ruby on Rails

Создание веб-приложений со скоростью света

5 месяцев
•

c опытом

Старт
1 июня

профессия

Верстальщик

Верстка с использованием последних стандартов CSS

5 месяцев
•

с нуля

Старт
в любое время

профессия

•
от 6 300 ₽ в месяц

Инженер по автоматизированному тестированию на JavaScript

Автоматизированное тестирование веб-приложений на JavaScript

10 месяцев
•

с нуля

в разработке

дата определяется

Please enable JavaScript to view the
comments powered by Disqus.

Что такое нативный прототип в JavaScript?

Silvija Prozinger

Grokking the Behavioral Interview

Многим кандидатам отказывают в приеме на технические собеседования или понижают их уровень из-за плохой успеваемости на собеседованиях поведенческого или культурного соответствия. Пройдите собеседование с помощью этого бесплатного курса, где вы будете практиковаться, уверенно отвечая на поведенческие вопросы интервью.

Собственный прототип — это свойство JavaScript, которое все встроенные функции-конструкторы в JavaScript используют для наследования методов и свойств друг от друга.

JavaScript — это язык на основе прототипов , что означает, что в JavaScript нет наследования классов, как в других языках программирования; вместо этого существует свойство прототипа, которое можно использовать для расширения объектов путем добавления к ним новых свойств и методов. Нативные прототипы можно редактировать или добавлять к ним новые, но нельзя их удалять.

Когда мы запускаем Object.prototype в консоли, мы можем увидеть прототип в действии и то, что представляет собой Объект.

  Object.prototype 
  // Возвращает следующее: 
  {конструктор: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, __lookupGetter__: ƒ, … } 
  конструктор: ƒ Object() 
  hasOwnProperty : ƒ hasOwnProperty() 
  isPrototypeOf: ƒ isPrototypeOf() 
  propertyIsEnumerable: ƒ propertyIsEnumerable() 
  toLocaleString: ƒ toLocaleString() 
  toString: ƒ toString() 
  значениеOf: ƒ значениеOf() 
  __defineGetter__: ƒ __defineGetter__() 
  __defineSetter__: ƒ __defineSetter__() 
  __lookupGetter__: ƒ __lookupGetter__() 
 9 0004 __lookupSetter__: ƒ __lookupSetter__() 
  получить __proto__: ƒ __proto__() 
  установить __proto__: ƒ __proto__()

В этом коде вы можете увидеть функцию-конструктор и несколько методов, которые есть у каждого объекта, например hasOwnProperty(), valueOf() и toString(), и это лишь некоторые из них. Поэтому всякий раз, когда объект вызывает метод toString(), он вызывает его непосредственно из Object.prototype, который есть у каждого объекта.

Давайте создадим пример объекта с помощью функции-конструктора, чтобы увидеть, как создается свойство-прототип:

  function Person(fullname, age, gender) { 
  this.fullname = fullname; 
  this.age = возраст; 
  this.gender = пол; 
  } 
  const firstPerson = new Person('amy adams', 46, 'female')

Если мы запустим Person.prototype в консоли, мы увидим показанный ранее метод конструктора и все методы, которые прийти с объектом, когда он создан. Если мы запустим firstPerson , мы можем увидеть следующее:

  Person {fullname: "amy adams", age: 46, gender: "female"} 
  age: 46 
  пол: "female" 
  fullname: "amy adams" 
  __proto__: 
  конструктор: ƒ человек(полное имя, возраст, пол) 
  аргументы: ноль 
  вызывающий абонент: ноль 
  длина: 3 
  полное имя: "человек" 900 03 
 прототип: {конструктор: ƒ} 
  __proto__: ƒ () 
  [[FunctionLocation]]: VM309:1 
  [[Scopes]]: Scopes[2] 
  __proto__: 
  конструктор: ƒ Object() 
  hasOwnProperty: ƒ hasOwnProperty() 
  isPrototypeOf: ƒ isPrototypeOf() 
  свойствоIsEnumerable: ƒ свойствоIsEnumerable() 
  toLocaleString: ƒ toLocaleString() 
  toString: ƒ toString() 
  valueOf: ƒ valueOf() 
  __defineGetter__: ƒ __defineGetter__() 
  __defineSetter__: ƒ __defineSetter__() 
  __lookupGetter__: ƒ __lookupGetter__() 
  __lookupSetter__: ƒ __lookupSetter__() 
  get __proto__: ƒ __proto__() 
  set __proto__: ƒ __proto__()

Сначала мы видим Функция-конструктор Person Person и все свойства, которые были определены в ней (ФИО, возраст , гендер), а также такие методы, как toString, valueOf и т. д., которые определены в объекте-прототипе объекта-прототипа Person, который является Object.prototype.

Другие встроенные объекты (такие как Array, Date, Function и т. д.) также сохраняют свои методы в прототипах.

Например, когда мы создаем массив, внутри используется новый конструктор Array() по умолчанию. Итак, Array.prototype становится его прототипом и предоставляет методы.

Термины _ _ proto_ _ и прототип оба присутствуют при обсуждении основанной на прототипах природы JavaScript.

Разница между ними:

__proto__ — это объект внутри каждого объекта. Он ссылается на прототип, который был установлен для этого объекта — мы можем увидеть это в действии в приведенных выше примерах кода.
Свойство прототипа присутствует только тогда, когда для создания объекта используется ключевое слово «new». Следовательно, он присутствует, когда объект создается с помощью функции конструктора.

СВЯЗАННЫЕ ТЕГИ

javascript

УЧАСТНИК

Сильвия Прозингер

Лицензия: Creative Commons-Attribution-ShareAlike 4.0 (CC-BY-SA 4.0)

9000 0 Учебник по Vue | NativeScript

Начало работы с NativeScript Vue

В этом руководстве вы познакомитесь с основами создания приложения NativeScript с помощью Vue, проведя вас через создание примера приложения с некоторыми основными функциями.

Это руководство научит вас следующему:

Создание макетов с использованием компонентов NativeScript
Добавление интерактивности в приложение с помощью жестов
Использование встроенных директив Vue для создания и изменения представлений
Использование маршрутизации для навигации между различными представлениями

Предварительные условия

Чтобы получить максимальную отдачу от этого руководства, вы уже должны иметь базовое представление о платформе Vue. Если вы новичок в Vue, вы можете сначала ознакомиться с их официальным руководством.

Обзор примера приложения

Компоненты образуют основные строительные блоки приложения Vue. Компоненты представляют собой страницы и представления, с которыми взаимодействует пользователь. NativeScript Vue следует той же концепции, с той лишь разницей, что в первую очередь это касается шаблонов и их стилей.

Вы создадите приложение master-details, которое отображает список мюзиклов и позволяет переходить на страницу сведений для просмотра дополнительной информации о каждом мюзикле.

Вы можете найти полный исходный код приложения на GitHub

Настройка среды

Чтобы настроить среду разработки, следуйте инструкциям в разделе «Настройка среды» документации.

Создайте новое приложение NativeScript Vue

Чтобы создать новое приложение NativeScript Vue, запустите команду CLI ns create с именем приложения, за которым следует --vue и --ts .

 нс создать пример-приложение --vue --ts

Интерфейс командной строки NativeScript создает новый каталог с корневой папкой с именем example-app с исходным каркасным проектом приложения и устанавливает необходимые пакеты и зависимости. Это может занять несколько минут и должно быть готово к запуску после завершения установки.

Запустите приложение

Перейдите в каталог проекта и выполните следующую команду, чтобы запустить его на соответствующих платформах.

 компакт-диск пример приложения
// запустить на iOS
ns запустить ios
// запустить на Android
нс запустить андроид

Команда ns run создает приложение и запускает его на подключенном устройстве Android или эмуляторе Android для Android и подключенном устройстве iOS или симуляторе iOS для iOS. По умолчанию он прослушивает изменения в вашем коде, синхронизирует эти изменения и обновляет все выбранные устройства.

Структура папок

На основе начального приложения Vue мы создадим следующую структуру файлов/папок для нашего приложения.

 приложение
  |- активы
      |- Анастасия.png
      |- beetlejuicemusical.png
      |- bookofmormon.png
  |- компоненты
      |- Home.vue
      |- Details.vue
  |- модели
      |- Flick.ts
  |- услуги
      |- FlickService.ts
  |- app.scss
  |- app.ts

Создайте домашнюю страницу

Давайте начнем с создания файла для нашей домашней функции со следующим содержимым:

 
<шаблон>
  <Страница> 

<язык скрипта="ts">
импортировать Vue из 'nativescript-vue'
экспортировать по умолчанию Vue.extend({})

Настройка маршрутизации

Мы настроим домашний компонент в качестве маршрута по умолчанию при запуске приложения. Откройте app.ts и добавьте следующий код:

 // приложение/приложение.тс
импортировать Vue из 'nativescript-vue'
импортировать Home из './components/Home.vue'
объявить let __DEV__: логическое значение
// Печатает журналы Vue, когда --env. production *НЕ* установлен при сборке
Vue.config.silent = !__DEV__
новый Vue({
  // Добавьте это (это может быть уже добавлено шаблоном) 👇
  рендеринг: h => h('frame', [h(Home)])
}).$старт()

Домашний пользовательский интерфейс

Прежде чем мы создадим пользовательский интерфейс нашей домашней страницы, давайте сначала создадим наши FlickModel и FlickService . Это позволит нам использовать данные непосредственно в нашем шаблоне.

FlickModel будет содержать форму каждого движущегося объекта. Создайте каталог моделей внутри приложения и создайте новый файл с именем Flick.ts . Откройте новый Flick.ts и добавьте следующий интерфейс :

 // app/models/Flick.ts
интерфейс экспорта FlickModel {
  идентификационный номер
  жанр: стринги
  название: строка
  изображение: строка
  URL: строка
  описание: строка
  подробности: {
    название: строка
    тело: строка
  }[]
}

Затем мы будем использовать FlickModel в нашем FlickService для возврата наших данных щелчка. Создайте каталог services внутри приложения и создайте новый файл с именем FlickService.ts . Откройте новый FlickService.ts и добавьте следующее:

 // app/services/FlickService.ts
импортировать {FlickModel} из '../models/Flick'
экспорт класса по умолчанию FlickService {
  частные видео: FlickModel[] = [
    {
      идентификатор: 1,
      Жанр: 'Мюзикл',
      название: 'Книга Мормона',
      изображение: '~/assets/bookofmormon.png',
      URL: 'https://nativescript.org/images/ngconf/book-of-mormon.mov',
      описание: «Сатирическое исследование верований и практики Церкви Иисуса Христа Святых последних дней»,
      подробности: [
        {
          title: 'Музыка, слова и книги',
          тело: «Трей Паркер, Роберт Лопес и Мэтт Стоун»
        },
        {
          title: 'Первый показ на Бродвее',
          тело: 'март 2011 после почти семи лет разработки.'
        },
        {
          заголовок: "Доход",
          тело:
            «Собрали более 500 миллионов долларов, что сделало его одним из самых успешных мюзиклов всех времен». 
        },
        {
          название: 'История',
          тело:
            «Книга Мормона была задумана Треем Паркером, Мэттом Стоуном и Робертом Лопесом. Паркер и Стоун выросли в Колорадо и были знакомы с Церковью Иисуса Христа Святых последних дней и ее членами. Они подружились в Университете Колорадо в Боулдере и вместе работали над музыкальным фильмом «Каннибал!». Мюзикл (1993), их первый опыт участия в киномюзиклах. В 1997 году они создали телесериал «Южный парк» для Comedy Central, а в 1999 году — музыкальный фильм «Южный парк: больше, длиннее и необрезанный». Эти двое впервые подумали о вымышленном Джозефе Смите, религиозном лидере и основателе движения Святых последних дней, когда работали над прерванным сериалом Fox об исторических персонажах. В их фильме 1997 года «Оргазмо» и в эпизоде Южного парка 2003 года «Все о мормонах» мормонизм получил комическую трактовку. Смит также был включен в число «Супер лучших друзей Южного парка», пародийной команды Лиги справедливости на религиозных деятелей, таких как Иисус и Будда ». 
        },
        {
          название: 'Развитие',
          body: `Летом 2003 года Паркер и Стоун прилетели в Нью-Йорк, чтобы обсудить сценарий своего нового фильма Team America: World Police с другом и продюсером Скоттом Рудином (который также продюсировал South Park: Bigger, Longer & Uncut ). Рудин посоветовал дуэту посмотреть мюзикл «Авеню Q» на Бродвее, обнаружив, что состав марионеток в «Команде Америка» похож на марионеток «Авеню Q». Тем летом Паркер и Стоун пошли посмотреть постановку, а сценаристы-композиторы «Авеню Q» Лопес и Джефф Маркс, заметили их в зале и представились. Лопес рассказал, что South Park: Bigger, Longer & Uncut оказал большое влияние на создание Avenue Q. После этого квартет пошел выпить и вскоре обнаружил, что каждый лагерь хочет написать что-нибудь с участием Джозефа Смита. Четверо начали прорабатывать детали почти сразу, и идея создать современную историю была сформулирована заранее. В исследовательских целях квартет совершил поездку в Солт-Лейк-Сити, где они «взяли интервью у группы миссионеров или бывших миссионеров».  Им пришлось подстраиваться под расписание Паркера и Стоуна в Южном парке. В 2006 году Паркер и Стоун прилетели в Лондон, где провели три недели с Лопесом, который работал над постановкой «Авеню Q» в Вест-Энде. Там они втроем написали «четыре или пять песен» и придумали основную идею истории. . После спора между Паркером и Марксом, который чувствовал, что ему не хватает творческого контроля, Маркс был отделен от проекта. В течение следующих нескольких лет оставшееся трио часто встречалось для разработки того, что они первоначально называли «Книгой Мормона: мюзикл Церкви Иисуса Христа Святых последних дней». «Было много прыжков между Лос-Анджелесом и Нью-Йорком, — вспоминает Паркер.
        }
      ]
    },
    {
      идентификатор: 2,
      Жанр: 'Мюзикл',
      название: 'Битлджус',
      изображение: '~/assets/beetlejuicemusical.png',
      URL-адрес: «https://nativescript.org/images/ngconf/beetlejuice.mov»,
      описание: «Умершая пара ищет помощи у коварного био-экзорциста, чтобы справиться с их домом с привидениями». ,
      подробности: [
        {
          название: 'Музыка и слова',
          тело: «Эдди Перфект»
        },
        {
          title: 'Забронировать',
          тело: «Скотт Браун и Энтони Кинг»
        },
        {
          title: 'На основе',
          кузов: 'А 1988 одноименный фильм».
        },
        {
          title: 'Первый показ на Бродвее',
          тело: «25 апреля 2019 г.»
        },
        {
          название: 'Фон',
          body: `В 2016 году сообщалось, что музыкальная адаптация фильма 1988 года «Битлджус» (режиссер Тим Бертон, с Джиной Дэвис в главной роли в роли Барбары Мейтленд, Алеком Болдуином в роли Адама Мейтленда, Вайноной Райдер в роли Лидии Дитц и Майклом Китоном в роли Бетельгейзе) находилась в произведения, поставленные Алексом Тимберсом и спродюсированные Warner Bros., после прочтения с Кристофером Фицджеральдом в главной роли. В марте 2017 года сообщалось, что австралийский музыкальный комик Эдди Перфект будет писать музыку и тексты, а Скотт Браун и Энтони Кинг будут писать книгу мюзикла, и что в мае состоится еще одно чтение с Крисом Кукулом в роли мюзикла.  директор. У мюзикла было три чтения и два лабораторных семинара с Алексом Брайтманом в главной роли, Софией Энн Карузо в роли Лидии Дитц, Керри Батлер и Робом МакКлюром в роли Барбары и Адама Мейтленда.
        }
      ]
    },
    {
      идентификатор: 3,
      Жанр: 'Мюзикл',
      Название: 'Анастасия',
      изображение: '~/assets/anastasia.png',
      URL: 'https://nativescript.org/images/ngconf/anastasia.mov',
      описание: `Легенда о великой княгине Анастасии Николаевне Российской.`,
      подробности: [
        {название: «Музыка и слова», основная часть: «Линн Аренс и Стивен Флаэрти»},
        {
          title: 'Забронировать',
          тело: 'Терренс МакНалли'
        },
        {
          title: 'На основе',
          кузов: 'А 1997 одноименный фильм».
        },
        {
          название: 'Фон',
          body: «В 2012 году состоялись чтения с Келли Баррет в роли Ани (Анастасия), Аарон Твейт в роли Дмитрия, Патрик Пейдж в роли Владимира и Анджела Лэнсбери в роли императрицы Марии.  Семинар прошел 12 июня 2015 года в Нью-Йорке, и в нем приняли участие Елена Шэддоу в роли Ани, Рамин Каримлу в роли Глеба Ваганова, новая роль, и Дуглас Силлс в роли Влада.
        Премьера оригинальной постановки « Анастасии» состоялась 13 мая 2016 года на Hartford Stage в Хартфорде, штат Коннектикут (превью). Шоу поставил Дарко Тресняк, а хореографию поставила Пегги Хики, а Кристи Альтомаре и Дерек Клена сыграли Аню и Дмитрия соответственно.
        Режиссер Тресняк объяснил: «Мы сохранили, кажется, шесть песен из фильма, но есть 16 новых номеров. Мы сохранили лучшие части анимационного фильма, но это действительно новый мюзикл». В мюзикле также добавлены персонажи, которых нет в фильме. Кроме того, действие 1-го акта происходит в России, а 2-го акта - в Париже, «что было всем, чего не было в современной советской России: свободным, выразительным, творческим, без барьеров», по словам МакНалли.
        В мюзикле также отсутствуют сверхъестественные элементы из оригинального фильма, в том числе персонаж Распутина и его музыкальный номер «В темноте ночи» (хотя мелодия этой песни переработана в новом номере «Останься, я молюсь»).  и вводит вместо этого нового злодея по имени Глеб, генерала большевиков, который получает приказ убить Аню.
        }
      ]
    }
  ]
  getFlicks(): FlickModel[] {
    вернуть это.flicks
  }
  getFlickById (id: номер): FlickModel | неопределенный {
    вернуть this.flicks.find(flick => flick.id === id) || неопределенный
  }
}

Добавьте в свой проект каталог /app/assets/ и скопируйте сюда 3 статических изображения из примера проекта.

Далее давайте разберем макет и элементы пользовательского интерфейса домашней страницы.

Домашнюю страницу можно разделить на две основные части: панель действий с заголовком и прокручиваемую область основного контента с карточками (мы поговорим о карточках в следующем разделе). Начнем с создания панели действий с заголовком. Открыть Home.vue и добавьте следующий код:

 
<шаблон>
  <Страница>
    
    
  

<язык скрипта="ts">
импортировать Vue из 'nativescript-vue'
экспортировать по умолчанию Vue. extend({})

Поскольку у нас есть массив щелчков для отображения, мы можем использовать компонент NativeScript ListView . ListView — это компонент пользовательского интерфейса NativeScript, который эффективно отображает элементы в списке с вертикальной или горизонтальной прокруткой. Давайте сначала создадим переменную с именем flick в нашем домашнем компоненте, которую мы собираемся использовать в качестве нашего Источник данных ListView . Откройте Home.vue и добавьте следующее:

 
<шаблон>
  <Страница>
    
  

<язык скрипта="ts">
импортировать Vue из 'nativescript-vue'
импортировать FlickService из «../services/FlickService»
const flickService = новый FlickService()
экспортировать по умолчанию Vue.extend({
  // Добавьте это 👇
  данные() {
    возвращаться {
      щелчки: flickService.getFlicks()
    }
  }
})

Затем добавьте компонент ListView :

 
<шаблон>
  <Страница>
    
    
    
      
        <Ярлык :text="item.title" />
      
    
  

<язык скрипта="ts">
импортировать Vue из 'nativescript-vue'
импортировать FlickService из «../services/FlickService»
const flickService = новый FlickService()
экспортировать по умолчанию Vue.extend({
  данные() {
    возвращаться {
      щелчки: flickService.getFlicks()
    }
  }
})

ListView в Vue использует свойство for в качестве источника данных. В приведенном выше фрагменте мы установили для свойства for значение item in flicks . Это перебирает массив щелчков и отображает содержимое в v-шаблоне для каждой записи. Если вы запустите приложение сейчас, вы должны увидеть список названий фильмов.

Создание карточек

Прежде чем мы углубимся в создание карточки ниже, давайте создадим несколько классов для нашего фона и цвета текста, которые мы будем использовать в приложении. Поскольку это будет общим для всего приложения, давайте добавим его в приложение.scss . Откройте app.scss и добавьте следующее:

 // src/app.scss
// применяется, когда устройство находится в легком режиме
.ns-свет {
  .bg-первичный {
    цвет фона: #fdfdfd;
  }
  .bg-вторичный {
    цвет фона: #ffffff;
  }
  .текст-первичный {
    цвет: #444;
  }
  .text-вторичный {
    цвет: #777;
  }
}
// применяется, когда устройство находится в темном режиме
.ns-темный {
  .bg-первичный {
    цвет фона: #212121;
  }
  .bg-вторичный {
    цвет фона: #383838;
  }
  .текст-первичный {
    цвет: #еее;
  }
  .text-вторичный {
    цвет: #ccc;
  }
}

Как вы можете видеть на изображении выше, каждая карточка состоит из 3 компонентов: изображения для предварительного просмотра, заголовка и описания. Мы будем использовать GridLayout в качестве нашего контейнера и использовать компоненты Image и Label для предварительного просмотра изображения и текстов. Откройте свой Home.vue и добавьте следующее:

 
<шаблон>
  <Страница>
    
    
    
      
        
          
          <метка
            ряд = "1"
            маржа = "10 10 0 10"
            Вес шрифта = "700"
           
            размер шрифта = "18"
            :текст="элемент.название"
          />
          <метка
            строка = "2"
            маржа="0 10 10 10"
           
            размер шрифта = "14"
            textWrap="истина"
            :текст="элемент.описание"
          />
        
      
    
  

<язык скрипта="ts">
  импортировать Vue из 'nativescript-vue'
  импортировать FlickService из «. ./services/FlickService»
  const flickService = новый FlickService()
  экспортировать по умолчанию Vue.extend({
    данные() {
      возвращаться {
        щелчки: flickService.getFlicks()
      }
    }
  })

Контрольная точка

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

Создать страницу сведений

Начнем с создания файла для нашей функции сведений со следующим содержимым:

 
<шаблон>
  <Страница> 

<язык скрипта="ts">
импортировать Vue из 'nativescript-vue'
экспортировать по умолчанию Vue.extend({})

Настройка навигации от домашнего компонента к компоненту сведений

Мы будем использовать функцию $navigateTo из nativescript-vue для перехода от нашего домашнего компонента к компоненту сведений. В дополнение к имени маршрута мы также передадим идентификатор фильма в качестве реквизита для нашей функции $navigateTo . Мы будем использовать этот идентификатор id в нашем компоненте сведений, чтобы получить доступ к дополнительной информации о фильме. Откройте Home.vue и добавьте следующее:

 
<шаблон>
  <Страница>
    
    
      
        
          
          <Ярлык
            ряд = "1"
            маржа = "10 10 0 10"
            Вес шрифта = "700"
           
            размер шрифта = "18"
            :текст="элемент.название"
          />
          <Ярлык
            строка = "2"
            маржа="0 10 10 10"
           
            размер шрифта = "14"
            textWrap="истина"
            :текст="элемент. описание"
          />
        
      
    
  

<язык скрипта="ts">
импортировать Vue из 'nativescript-vue'
импортировать FlickService из «../services/FlickService»
импортировать детали из './Details.vue'
const flickService = новый FlickService()
экспортировать по умолчанию Vue.extend({
  данные() {
    возвращаться {
      щелчки: flickService.getFlicks()
    }
  },
  методы: {
    // Добавьте это 👇
    onFlickTap (аргументы) {
      постоянный идентификатор = args.item.id
      this.$navigateTo(Подробности, {
        реквизит: {идентификатор}
      })
    }
  }
})

Теперь давайте добавим событие касания к элементам списка. Откройте Home.vue и добавьте следующее:

 
<шаблон>
  <Страница>
    
    <макет стека>
      <СписокView
       
        separatorColor="прозрачный"
        for="элемент в фильмах"
        @itemTap="наFlickTap"
      >
        
        
          
             image" />
            <метка
              ряд = "1"
              маржа = "10 10 0 10"
              Вес шрифта = "700"
             
              размер шрифта = "18"
              :текст="элемент.название"
            />
            <метка
              строка = "2"
              маржа="0 10 10 10"
             
              размер шрифта = "14"
              textWrap="истина"
              :текст="элемент.описание"
            />
          
        
      
    
  

<язык скрипта="ts">
  импортировать Vue из 'nativescript-vue'
  импортировать FlickService из «../services/FlickService»
  импортировать детали из './Details.vue'
  const flickService = новый FlickService()
  экспортировать по умолчанию Vue.extend({
    данные() {
      возвращаться {
        щелчки: flickService.getFlicks()
      }
    },
    методы: {
      onFlickTap (аргументы) {
        постоянный идентификатор = args.item.id
        this.$navigateTo(Подробности, {
          реквизит: {идентификатор}
        })
      }
    }
  })

Доступ к реквизитам навигации

Мы передали id флик-карты, которую пользователь нажал в предыдущем разделе, когда переходим к компоненту сведений. Мы можем использовать свойство props , чтобы получить переданный в id . Затем мы можем использовать id , чтобы получить выбранную информацию о щелчке, которая будет отображаться в шаблоне нашего компонента сведений. Откройте Details.vue и добавьте следующее:

 
<шаблон>
  <Страница>

<язык скрипта="ts">
импортировать Vue из 'nativescript-vue'
// Добавьте это 👇
импортировать FlickService из «../services/FlickService»
// Добавьте это 👇
const flickService = новый FlickService()
экспортировать по умолчанию Vue.extend({
  // Добавьте это 👇
  реквизит: ['id'],
  данные() {
    // Добавьте это 👇
    возвращаться {
      щелчок: flickService.getFlickById(this.id)
    }
  }
})

Пользовательский интерфейс сведений

Давайте разберем макет и элементы пользовательского интерфейса страницы сведений.

Страница сведений может быть разделена на три основные части: панель действий с заголовком фильма, главное изображение и основной контент с подробностями фильма. Мы будем использовать массив details из нашего объекта flicks для заполнения раздела сведений о щелчке. Массив details содержит объекты с заголовком и телом , которые отображаются единообразно, каждый со своим стилем. Мы можем использовать Vue v-for директива для цикла по массиву и создания элемента пользовательского интерфейса или набора элементов для каждой записи в массиве. Откройте Details.vue и добавьте следующий код:

 
<шаблон>
  <Страница>
    
    
    
    <прокрутка>
      <макет стека>
        
        
          
            <Ярлык
              маржаВверх = "15"
              размер шрифта = "16"
              Вес шрифта = "700"
             
              textWrap="истина"
              :текст="деталь. название"
            />
            <Ярлык
              размер шрифта = "14"
             
              textWrap="истина"
              :текст="деталь.тело"
            />
          
        
      
    
  

<язык скрипта="ts">
импортировать Vue из 'nativescript-vue'
импортировать FlickService из «../services/FlickService»
const flickService = новый FlickService()
экспортировать по умолчанию Vue.extend({
  реквизит: ['id'],
  данные() {
    возвращаться {
      щелчок: flickService.getFlickById(this.id)
    }
  }
})

Контрольная точка

Запуск приложения на любой платформе теперь должен привести к появлению приложения, похожего на показанное на этом снимке экрана, с возможностью перехода между домашней страницей и страницей сведений.

Что дальше

Поздравляем! Вы создали свое первое приложение NativeScript, которое работает как на iOS, так и на Android.

This entry was posted in Популярное

Posted:

Comments: