Содержание
Внутренняя жизнь React Native. React Native — это библиотека… | by Jenny V | NOP::Nuances of Programming
React Native — это библиотека JavaScript для создания мобильных приложений, работающих как на Android, так и на iOS. Как говорят создатели: “Научитесь однажды — пишите где угодно.” На протяжении двух последних лет она занимает ведущие позиции на рынке и уступать их никому не собирается. Как бы сильно я ни любила Flutter, в какой-то момент мне пришлось признать достоинства React Native и ее потенциал для создания действительно классных проектов.
Источник: statista
В статье мы рассмотрим, как данная библиотека выполняет JavaScript на устройствах Android и iOS.
Вы узнаете:
- Как происходит рендеринг UI приложения React Native.
- Как код JavaScript объединяется в один общий файл (бандл) и преобразуется в приложение Android/iOS.
- Как устройство Android/iOS понимает JavaScript.
- Как нативный поток взаимодействует с потоком JavaScript.
- Краткий анализ производительности приложения React Native.
Для начала проясним два момента.
- Да, рендеринг приложения React Native происходит с помощью нативных представлений (views).
- Нет, код JavaScript не компилируется в родной язык платформы.
Почему? Все просто. Как сможет телефон перевести такой слабо типизированный язык, как JavaScript, в сильно типизированный по типу Java или Objective C?
Вы пишите код UI в React Native, используя компоненты и соблюдая однонаправленный принцип, характерный для React. У вас есть дерево компонентов, взаимодействие между которыми осуществляется посредством свойств и обратных вызовов. Если родительскому компоненту что-то требуется от дочернего, то обратный вызов передается последнему. Таким же образом передается свойство дочернему компоненту, если ему что-то понадобилось от родителя.
Пока вы следуете этому принципу, и вам не нужно смешивать подход React Native к созданию компонентов с нативно написанными представлениями, то вы будете создавать привлекательные UI без каких-либо затрат.
Однако в случае необходимости написать нативный код для чего-то вроде MapView библиотека поможет вам наладить двухстороннее взаимодействие между ним и RN.
С этим вопросом все понятно, разбираемся дальше. Как OS понимает код JavaScript?
Нативное мобильное приложение создается с применением языка программирования, характерного для конкретной платформы. При разработке на React Native вполне можно обойтись без написания кода Objective-C/Java, если только перед вами не стоит задача, выходящая за рамки библиотеки, например интеграция платежного провайдера, предоставляющего только SDK для Android и iOS.
Однако любой проект React Native включает директории ios и android. Они служат точками входа для платформы и, по сути, загружают RN. Эти директории содержат характерный для каждой из них код, и именно здесь код JS с ними соединяется.
Как правило, приложение запускается с помощью yarn android или yarn ios, после чего остается дождаться его волшебного открытия на выбранном устройстве.
Но что же происходит в процессе ожидания?
При вводе одной из команд, а именно react-native run-android и react native run-ios, вы запускаете сборщик, одним из которых является Metro. Он берет весь код JS и размещает его в одном файле main.bundle.js. Когда приложение в итоге открывается, телефон ищет его в привычном для него месте: в директории android или ios. Это и есть нативная точка входа, о которой шла речь выше. Она запускает движок JavaScript в потоке, в котором затем будет выполняться объединенный код, содержащийся в main.bundle.js.
Этот код будет взаимодействовать с нативным потоком с помощью моста (bridge) React Native.
В следующих разделах мы еще поговорим о концепции моста и проанализируем производительность приложений RN, но прежде разберемся с тем, как телефон выполняет код JavaScript.
Для этих целей как раз и существует фреймворк JavaScriptCore. На устройствах iOS он предоставляется непосредственно OS.
А вот на устройствах Android его нет, поэтому React Native поставляет его в комплекте с самим приложением. Это приводит к незначительному увеличению размера, но в конечном итоге особой роли это не играет.
Обратим внимание на один момент, который позволит сэкономить время при отладке. JavaScriptCore применяется для выполнения кода JS при запуске приложения на устройстве. Однако если вы решите провести отладку этого приложения, то код будет выполняться в Chrome. Данный браузер использует движок V8 и WebSocket для взаимодействия с нативным кодом, поэтому вы сможете видеть важную информацию, такую как корректно отформатированные логи и генерируемые сетевые запросы. Просто не стоит забывать о существующих различиях между движком V8 и JavaScriptCore. Это разные среды, и появление ошибок возможно только при подключенном отладчике, а не при обычном запуске приложения на устройстве!
Я использую отладчик только при необходимости. По опыту знаю, что при его подключении работа приложения нарушается.
С подобной ситуацией я столкнулась в процессе создания календаря посредством библиотеки react-native-calendar от Wix. Метод onDayPress просто отказался работать. При этом я не могла понять, где кроется ошибка! Тщательнейшим образом изучила и перечитала документацию библиотеки — все было сделано правильно. Однако у меня был подключен отладчик, и во время отладки кода метод не работал.
Поэтому, когда в таких ситуациях приложение начинает странно себя вести, возьмите паузу и посмотрите, будет ли оно вести себя также при отключенном режиме отладчика.
Мост RN, написанный на Java/C++, обеспечивает взаимодействие между основным потоком приложения и потоком JavaScript, используя для этого пользовательский протокол передачи сообщений.
Поток JavaScript решает, что должно быть отображено на экране. Например, он дает указание основному потоку отрисовать кнопку и текст, для чего использует мост. Сообщение отправляется в формате сериализованного JSON. Оно не только устанавливает, что отображать на экране, но еще и где.
Именно здесь в игру вступает теневой поток, который запускается вместе с потоком JavaScript и помогает вычислять расположение представлений. Результаты передаются в вышеупомянутом сообщении, которое посредством моста отправляется в основной поток.
Все действия, совершаемые пользователем в отношении UI, происходят в основном потоке. Нажатие на кнопку, переключение состояний — любое из них должно быть сериализовано и отправлено с помощью моста в поток JavaScript. Именно здесь выполняется вся логика приложения.
Обобщим все вышесказанное. Пользователь нажимает на кнопку. Основной поток распознает это действие и передает его в виде сообщения в поток JavaScript. Здесь происходит обработка логики, за которым следует соответствующее изменение UI. Теневой поток определяет, где произошли эти изменения, после чего обновления в формате сообщения отправляются обратно в основной поток. Как правило, пользователь не слишком быстро нажимает на экран, поэтому проблем с производительностью в стандартных сценариях использования не предвидится — мост довольно быстро обрабатывает результаты взаимодействия потоков.
Отличительное преимущество React Native (по сравнению с другими платформами, например Cordova) состоит в том, что он не выполняет код в WebView, а использует нативные представления. Это означает, что у нас есть возможность разрабатывать стабильные и быстрые приложения, работающие со скоростью 60 кадров в секунду. Если вы меняете состояние компонента из верхней части дерева (не предотвратив ненужные повторные отрисовки), то заново будет отображаться все дерево целиком. В большинстве случаев пользователь этого не заметит. Но если дочерние компоненты ресурсозатратные, приложение начнет понемногу сбоить.
С объективной точки зрения определить наилучший подход к разработке мобильных приложений невозможно. У каждого фреймворка или библиотеки есть свои достоинства и недостатки. При выборе технологии следует руководствоваться текущими потребностями, бюджетом, наличием команды разработчиков и многими другими факторами. Но в целом React Native эффективно удовлетворяет большинство потребностей.
Надеюсь, теперь вы лучше понимаете внутреннюю работу приложения React Native, от процесса бандлинга до запуска на мобильном устройстве. А мне уже не терпится узнать, какие новшества готовит экосистема React Native. Нас ждут увлекательные открытия!
Благодарю за внимание!
Читайте также:
- 5 проектов на React для начинающих
- 7 лучших библиотек для создания эффективных приложений ReactJS
- Знакомство с ReactJS на базовом уровне
Читайте нас в Telegram, VK и Яндекс.Дзен
Перевод статьи Bianca Dragomir: React Native: Under the Hood
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 позволяет напрямую связать плагин с собственным модулем через инфраструктуру. Это приводит к более плавному запуску приложения, более быстрой загрузке и меньшим требованиям к памяти.
Учебник по Vue | NativeScript
Начало работы с NativeScript Vue
В этом руководстве вы познакомитесь с основами создания приложения NativeScript с помощью Vue, проведя вас через создание примера приложения с некоторыми основными функциями.
В этом руководстве вы узнаете следующее:
- Создание макетов с использованием компонентов NativeScript
- Добавление интерактивности в приложение с помощью жестов
- Использование встроенных директив Vue для создания и изменения представлений
- Используйте маршрутизацию для навигации между различными представлениями
Предварительные требования
Чтобы получить максимальную отдачу от этого руководства, вы уже должны иметь базовое представление о структуре Vue. Если вы новичок в Vue, вы можете сначала ознакомиться с их официальным руководством.
Обзор примера приложения
Компоненты образуют основные строительные блоки приложения Vue. Компоненты представляют собой страницы и представления, с которыми взаимодействует пользователь. NativeScript Vue следует той же концепции, с той лишь разницей, что в первую очередь это касается шаблонов и их стилей.
Вы создадите приложение master-details, которое отображает список мюзиклов и позволяет перейти на страницу сведений, чтобы просмотреть дополнительную информацию о каждом мюзикле.
Полный исходный код приложения можно найти на GitHub
Настройка среды
Чтобы настроить среду разработки, следуйте инструкциям в разделе «Настройка среды» документации.
Создать новое приложение NativeScript Vue
Чтобы создать новое приложение NativeScript Vue, выполните команду CLI ns создать с именем приложения, за которым следует --vue и --ts .
нс создать пример-приложение --vue --ts
Интерфейс командной строки NativeScript создает новый каталог с корневой папкой с именем example-app с исходным каркасным проектом приложения и устанавливает необходимые пакеты и зависимости. Это может занять несколько минут и должно быть готово к запуску после завершения установки.
Запустите приложение
Перейдите в каталог проекта и выполните следующую команду, чтобы запустить его на соответствующих платформах.
компакт-диск пример приложения // запустить на iOS нс запустить 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 и добавьте следующий код:
// app/app.ts импортировать Vue из 'nativescript-vue' импортировать Home из './components/Home.vue' объявить let __DEV__: логическое значение // Печатает журналы Vue, когда --env.
Домашний пользовательский интерфейс
Прежде чем мы создадим пользовательский интерфейс нашей домашней страницы, давайте сначала создадим наши FlickModel и FlickService . Это позволит нам использовать данные непосредственно в нашем шаблоне.
FlickModel будет содержать форму каждого движущегося объекта. Создайте каталог моделей внутри приложения и создайте новый файл с именем Flick.ts . Откройте новый Flick.ts и добавьте следующий интерфейс :
// приложение/модели/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 и добавьте следующий код:
<шаблон>
<Страница>
Поскольку у нас есть массив щелчков для отображения, мы можем использовать компонент NativeScript ListView . ListView — это компонент пользовательского интерфейса NativeScript, который эффективно отображает элементы в списке с вертикальной или горизонтальной прокруткой. Давайте сначала создадим переменную с именем flick в нашем домашнем компоненте, которую мы собираемся использовать в качестве нашего Источник данных ListView . Откройте Home.vue и добавьте следующее:
<шаблон>
<Страница>
Затем добавьте компонент 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 и добавьте следующее:
<шаблон>
<Страница>
<язык скрипта="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 и добавьте следующее:
<шаблон>
<Страница>
<язык скрипта="ts">
импортировать Vue из 'nativescript-vue'
импортировать FlickService из «../services/FlickService»
импортировать детали из './Details.vue'
const flickService = новый FlickService()
экспортировать по умолчанию Vue.extend({
данные() {
возвращаться {
щелчки: flickService.getFlicks()
}
},
методы: {
// Добавьте это 👇
onFlickTap (аргументы) {
постоянный идентификатор = args.item.id
this.$navigateTo(Подробности, {
реквизит: {идентификатор}
})
}
}
})
Теперь давайте добавим событие касания к элементам списка. Откройте Home.vue и добавьте следующее:
<шаблон>
<Страница>
![]()
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. Вы можете продолжить добавлять дополнительные компоненты пользовательского интерфейса NativeScript (или создать свои собственные компоненты пользовательского интерфейса) или добавить некоторые собственные функции. Возможности безграничны!
1. Что такое React Native?
React Native — это JavaScript-фреймворк для написания реальных мобильных приложений для iOS и Android с естественной визуализацией. Он основан на React, JavaScript-библиотеке Facebook для создания пользовательских интерфейсов, но ориентирован не на браузер, а на мобильные платформы. Другими словами: веб-разработчики теперь могут писать мобильные приложения, которые выглядят и чувствуют себя по-настоящему «нативными», и все это с помощью библиотеки JavaScript, которую мы уже знаем и любим. Кроме того, поскольку большую часть кода, который вы пишете, можно использовать на разных платформах, React Native упрощает одновременную разработку как для Android, так и для iOS.
Подобно React для Интернета, приложения React Native написаны с использованием смеси JavaScript и XML-разметки, известной как JSX. Затем «мост» React Native вызывает нативные API-интерфейсы рендеринга в Objective-C (для iOS) или Java (для Android). Таким образом, ваше приложение будет отображаться с использованием реальных компонентов мобильного пользовательского интерфейса, , а не веб-просмотров, и будет выглядеть и работать как любое другое мобильное приложение. React Native также предоставляет интерфейсы JavaScript для API-интерфейсов платформы, поэтому ваши приложения React Native могут получать доступ к функциям платформы, таким как камера телефона или местоположение пользователя.
В настоящее время React Native поддерживает как iOS, так и Android, а также имеет потенциал для расширения на будущие платформы. В этой книге мы рассмотрим как iOS, так и Android. Подавляющее большинство кода, который мы пишем, будет кроссплатформенным. И да: вы действительно можете использовать React Native для создания готовых мобильных приложений! Некоторые анекдоты: Facebook, Palantir и TaskRabbit уже используют его в производстве для приложений, ориентированных на пользователя.
Тот факт, что React Native фактически выполняет рендеринг с использованием стандартных API-интерфейсов рендеринга своей хост-платформы, выделяет его среди большинства существующих методов разработки кросс-платформенных приложений, таких как Cordova или Ionic. Существующие методы написания мобильных приложений с использованием комбинации JavaScript, HTML и CSS обычно отображаются с использованием веб-просмотров. Хотя этот подход может работать, он также имеет недостатки, особенно в отношении производительности. Кроме того, у них обычно нет доступа к набору собственных элементов пользовательского интерфейса хост-платформы. Когда эти фреймворки пытаются имитировать нативные элементы пользовательского интерфейса, результаты обычно «кажутся» немного неправильными; обратный инжиниринг всех мелких деталей таких вещей, как анимация, требует огромных усилий, и они могут быстро устареть.
Напротив, React Native фактически переводит вашу разметку в настоящие собственные элементы пользовательского интерфейса, используя существующие средства рендеринга представлений на любой платформе, с которой вы работаете. Кроме того, React работает отдельно от основного потока пользовательского интерфейса, поэтому ваше приложение может поддерживать высокую производительность без ущерба для возможностей. Цикл обновления в React Native такой же, как и в React: когда props или state изменяются, React Native перерисовывает представления. Основное различие между React Native и React в браузере заключается в том, что React Native делает это, используя библиотеки пользовательского интерфейса своей основной платформы, а не используя разметку HTML и CSS.
Для разработчиков, привыкших работать в Интернете с помощью React, это означает, что вы можете писать мобильные приложения с производительностью и внешним видом нативного приложения, используя знакомые инструменты. React Native также представляет собой улучшение по сравнению с обычной мобильной разработкой в двух других областях: опыт разработчиков и потенциал кроссплатформенной разработки.
Опыт разработчика
Если вы когда-либо занимались разработкой для мобильных устройств, вы можете быть удивлены тем, насколько легко работать с React Native. Команда React Native внедрила в фреймворк мощные инструменты разработчика и осмысленные сообщения об ошибках, поэтому работа с надежными инструментами является естественной частью вашего опыта разработки.
Например, поскольку React Native — это «просто» JavaScript, вам не нужно пересобирать приложение, чтобы отразить ваши изменения; вместо этого вы можете нажать Command + R, чтобы обновить приложение так же, как и любую другую веб-страницу. Все эти минуты, потраченные на ожидание сборки вашего приложения, действительно могут складываться, и, напротив, быстрый цикл итераций React Native кажется Божьим даром.
Кроме того, React Native позволяет использовать интеллектуальные инструменты отладки и отчеты об ошибках. Если вам удобно работать с инструментами разработчика Chrome или Safari (рис. 1-1), вы будете рады узнать, что можете использовать их и для разработки мобильных приложений. Точно так же вы можете использовать любой текстовый редактор, который предпочитаете для редактирования JavaScript: React Native не заставляет вас работать в Xcode для разработки под iOS или в Android Studio для разработки под Android.
Рис. 1-1. Использование отладчика Chrome
Помимо ежедневных улучшений вашего опыта разработки, React Native также может положительно повлиять на цикл выпуска вашего продукта. Например, Apple разрешает загружать изменения поведения приложения на основе JavaScript по беспроводной сети без необходимости дополнительного цикла проверки.
Все эти небольшие преимущества позволяют сэкономить время и энергию вам и вашим коллегам-разработчикам, позволяя вам сосредоточиться на более интересных частях вашей работы и в целом работать более продуктивно.
Повторное использование кода и обмен знаниями
Работа с React Native может значительно сократить ресурсы, необходимые для создания мобильных приложений. Любой разработчик, который знает, как писать код React, теперь может ориентироваться на Интернет, iOS и Android, обладая одним и тем же набором навыков. Устраняя необходимость разделять разработчиков на основе их целевой платформы, React Native позволяет вашей команде выполнять итерации быстрее и более эффективно обмениваться знаниями и ресурсами.
Помимо общих знаний, большая часть вашего кода также может использоваться совместно. Не весь код, который вы пишете, будет кроссплатформенным, и в зависимости от того, какая функциональность вам нужна на конкретной платформе, вам может иногда понадобиться погрузиться в Objective-C или Java. (К счастью, это не так уж плохо, и мы расскажем, как работают так называемые нативные модули, в главе 7.) Но повторное использование кода на разных платформах с React Native на удивление легко. Например, приложение Facebook Ads Manager для Android на 87 % имеет тот же код, что и версия для iOS, как отмечалось в программном докладе React Europe 2015. Последнее приложение, которое мы рассмотрим в этой книге, приложение для карточек, имеет полное повторное использование кода между Android и iOS. Это трудно победить!
Как и все остальное, использование React Native не лишено недостатков, и то, подходит ли React Native для вашей команды, действительно зависит от вашей индивидуальной ситуации.
Самый большой риск, вероятно, связан с зрелостью React Native, поскольку проект все еще относительно молод. Поддержка iOS была выпущена в марте 2015 года, а поддержка Android — в сентябре 2015 года. Документация, безусловно, нуждается в улучшении и продолжает развиваться. Некоторые функции на iOS и Android по-прежнему не поддерживаются, и сообщество все еще изучает передовые методы. Хорошая новость заключается в том, что в подавляющем большинстве случаев вы можете реализовать поддержку отсутствующих API самостоятельно, о чем мы расскажем в главе 7.
Поскольку React Native вводит еще один уровень в ваш проект, он также может усложнить отладку, особенно на пересечении React и хост-платформы. Мы более подробно рассмотрим отладку для React Native в главе 8 и попытаемся решить некоторые из наиболее распространенных проблем.
React Native еще молод, и здесь применимы обычные предостережения, связанные с работой с новыми технологиями. Тем не менее, в целом, я думаю, вы увидите, что преимущества перевешивают риски.
React Native — замечательная платформа, которая позволяет веб-разработчикам создавать надежные мобильные приложения, используя имеющиеся у них знания JavaScript. Он предлагает более быструю мобильную разработку и более эффективный обмен кодом между iOS, Android и в Интернете без ущерба для удобства работы конечного пользователя или качества приложения. Компромисс в том, что он новый и все еще находится в стадии разработки. Если ваша команда может справиться с неопределенностью, связанной с работой с новой технологией, и хочет разрабатывать мобильные приложения для нескольких платформ, вам следует обратить внимание на React Native.
В следующей главе мы рассмотрим некоторые основные отличия React Native от React для Интернета и рассмотрим некоторые ключевые концепции. Если вы хотите сразу перейти к разработке, смело переходите к главе 3, в которой мы займемся настройкой среды разработки и напишем наше самое первое приложение React Native.
Получите Learning React Native прямо сейчас с обучающей платформой O’Reilly.