React native всплывающее сообщение

Обновлено: 05.07.2024

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

Текстовые редакторы и IDE

Visual Studio Code - это текстовый редактор, имеющий встроенное автодополнение, проверку ошибок и возможности интеграции с Git. Что делает его особо полезным для разработки React Native - это наличие расширения инструменты React Native. Оно позволяет выполнять команды React Native в командной строке, имеет автодополнения для команд API React Native, а также проверяет код на ошибки в самом редакторе.

Для более подробной информации о том, как настроить Visual Studio Code для React Native, посмотрите вот эту статью на блоге: VSCode для React Native.

Если вы пользуетесь Atom, то можно установить плагин Nuclide. Он был специально создан для работы с проектами React Native, Flow и Hack. Он имеет встроенную проверку на ошибки и инспектор элементов со всеми возможностями, к которым вы привыкли в Инструментах Разработчика Chrome. Поддержка Flow означает, что вам из коробки будут доступны автодополнение, подсказки при наборе текста и диагностика кода.

Если вы хотите узнать и о других вариантах IDE и редакторов, посмотрите вот эту статью на блоге "10 лучших редакторов для React Native".

Инструменты разработки

Инструменты разработки очень разнообразны, так что я сгруппирую их по основным задачам:

SDK
качество кода
тестирование
проверка на ошибки

В качестве SDK для React Native нет ничего лучше Expo. Expo позволяет вам быстро создать прототип приложения без необходимости использовать Android Studio или Xcode. Он включает набор компонентов и библиотек, которые помогут ускорить ваш процесс разработки.

Процесс разработки на Expo состоит из следующих шагов:

Создание нового проекта, используя create-react-native-app.
Написание кода в вашем любимом текстовом редакторе.
Запуск приложения, используя клиентское приложение Expo.

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

Единственным недостатком использования Expo является то, что вы не можете добавлять специальные пакеты для работы с нативным функционалом устройства. Expo уже включает некоторые наиболее часто используемые пакеты, такие как Camera, Facebook и Map. Но если вам необходимо использовать пакеты, которые они еще не поддерживают, то вам придется "извлечь" ваше приложение. В таком случае ваше приложение будет выглядеть так, будто было создано с помощью react-native init , а также вы потеряете возможность запускать его через клиентское приложение Expo.

Качество кода

Важно проверять качество вашего кода, и именно для этих целей существуют инструменты вроде ESLint. По сути, отслеживание качества позволяет вам быть более последовательными в коде, который проверяется на соответствие руководству по разработке. Примером такого руководства может служить Airbnb's JavaScript Style Guide, в котором даны правила того, как должен быть написан код JavaScript. Инструмент проверки соответствия сверяет ваш код с этими правилами, чтобы убедиться, что вы им следовали. Есть также и руководство для проектов React.

Если вы используете Sublime Text, то есть хороший урок о том, как настроить его для получения в реальном времени оценки качества вашего когда: Sublime Linting для React и ES6. Если вы используете другое IDE или редактор, не забудьте найти соответствующий плагин, который использует ESLint.

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

Для начала использования Flow ознакомьтесь с уроком о том, как настроить Flow для ваших React Native проектов.

Тестирование

Enzyme является утилитой тестирования для React, которая позволяет проверять соответствие, изменять и переносить выходные данные вашего компонента. Она предоставляет такие методы как shallow() для "пустого" отображения ваших компонентов, find() для передачи выводимого компонента, и expect() для проверки соответствия параметров компонента или выводимого им содержимого.

Вы можете пройти вот этот урок о том, как использовать enzyme для тестирования компонентов в React Native для того, чтобы добавить возможности тестирования enzyme вашему React Native приложению. Если вы не знакомы с enzyme, то можете прочитать вот этот урок "Тестирование компонентов React с помощью Enzyme и Mocha".

Проверка на ошибки

Заготовки и UI фреймворки

Snowflake - это заготовка для full-stack React Native разработки. В ней есть все от фронт-енда до бек-енда приложения. Так что если вам просто нужен инструмент для того, чтобы ускорить начало создания проекта, то Snowflake может вам быть полезен. Вы можете почитать заметки для того, чтобы узнать, какие пакеты и инструменты здесь используются.

Как другой вариант, вы можете использовать Ignite. Это инструмент командной строки, включающий заготовку проекта, генераторы, руководство по разработке UI компонентов, инструмент тестирования API и многое другое.

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

В этом вам поможет NativeBase. Он сделает так, что ваше приложение будет выглядеть и восприниматься как родное приложение платформы, за счет того, что добавит то же оформление, которое используется в нативных приложениях Android (Material Design) и iOS (Human Interface Guidelines). Прямо из коробки вы получите набор специальных компонентов, таких как основные кнопки действий, спиннеры, и, что самое лучшее, компоненты форм.

Библиотеки и компоненты

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

навигация
управление состоянием
анимация
наиболее часто используемые компоненты и библиотеки

React Navigation позволяет вам легко добавить навигацию в ваше приложение React Native, используя встроенные элементы навигации Stack Navigator, Tab Navigator и Drawer Navigator. Но это не все: в дополнение к навигации внутри приложения, здесь также есть создание глубоких ссылок, интеграция с Redux, и интеграция с веб. Это делает ее на самом деле полноценной библиотекой для добавления навигации.

Управление состоянием.

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

Для более объемных и сложных случаев все еще рекомендуется использовать Redux. Это потому, что MobX достаточно либерален, в отличие от Redux, который предъявляет строгие требования к тому, как должно происходить управление состоянием. Так что это более мудрый выбор для больших проектов, в работе над которыми участвует много людей.

Анимация

React Native включает в себя API анимации. На самом деле здесь есть не просто один, а целых два API для работы с анимацией: Animated API и LayoutAnimation. Они достаточно мощные, но могут быть слишком сложными, особенно если вам просто надо применить базовую анимацию типа перемещения объекта вверх и вниз или его подпрыгивания. В таких случаях удобно использовать компоненты вроде Animatable.

Наиболее часто используемые компоненты и библиотеки

Вот список компонентов и библиотек, которые наиболее часто используются в проектах React Native. Они совместимы как с Android так и с iOS устройствами:

Веб сервисы

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

базы данных
аналитика
всплывающие уведомления
обновления кода
непрерывная разработка

Базы данных

Realm это база данных в реальном времени, которая предназначена для мобильных приложений. Она имеет такие возможности как двух-факторная синхронизация данных, возможности для работы без подключения к сети и передача данных. Realm Mobile Database - это ПО с открытым исходным кодом и совместимое с различными платформами, что означает, что вы можете использовать Realm Object Server на своем сервере, а также использовать библиотеку Realm JavaScript бесплатно.

Не все возможности доступны в версии для разработчиков, но в большинстве случаев вам должно ее хватить, поскольку здесь есть основные возможности, такие как объектная база данных, синхронизация в реальном времени и аутентификация. Вот сравнительная таблица того, что доступно для каждой версии: Продукты и Цены Realm.

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

Аналитика

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

Всплывающие уведомления

Что касается реализации всплывающих уведомлений в приложениях, то тут есть одно средство, у которого просто нет конкурентов. Firebase Cloud Messaging (ранее известное как Google Cloud Messaging) позволяет вам отправлять всплывающие уведомления как в Android так и в iOS приложения. Для коммуникации вашего приложения с FCM вы можете использовать пакет react-native-fcm.

Обновления кода

CodePush позволяет вам применять обновления в коде мобильных приложений непосредственно на устройствах пользователей. CodePush выступает в роли центрального репозитория, куда вы можете загружать изменения в коде HTML, CSS, JavaScript, а также новые ресурсы такие как изображения. Соответствующий код CodePush в приложении затем будет загружать эти изменения. Это отлично подходит для загрузки исправлений ошибок без необходимости загружать их в магазин приложений и ждать пока пользователи сами обновят приложение. Вы можете использовать вот этот пакет для загрузки обновлений из CodePush в ваше приложение React Native.

Непрерывная разработка

Fastlane - это набор инструментов для автоматизации процесса сборки и релиза приложений для Android и iOS. Для iOS он отвечает за такие задачи как запуск ваших тестов, генерирование снимков экрана, подписывание кода и релиз приложения в магазин приложений. Он также включает такие инструменты бета-тестирования как Pilot и Boarding. Pilot позволяет вам загружать ваше приложение в iTunes Connect и управлять вашими TestFlight бета-тестировщиками прямо из командной строки. Boarding создает страницу регистрации для TestFlight бета-тестировщиков.

Эти инструменты больше направлены на iOS разработку, но они могут быть полезны и для создания Android приложений. Пока что доступно только два инструмента для Android разработки: Supply и Screengrab.

Supply позволяет автоматизировать загрузку ресурсов, таких как иконка приложения, рекламные изображения и снимки экрана вашего приложения. Также он позволяет вам обновлять ваше существующее приложение в магазине Google Play.

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

Заключение

Вот и все! В этой статье вы узнали о некоторых инструментах, библиотеках и сервисах, которые вы можете использовать в разработке приложений React Native. А как насчет вас? Какие инструменты вы чаще всего используете, когда разрабатываете приложения React Native?

И пока вы не ушли, обратите внимание и на некоторые другие наши статье о разработке приложений React Native!

2 ответа 2

Это называется модальное окно (modal window) Чтобы не изобретать велосипед, необходимо воспользоваться библиотеками, к примеру: 1) компонент Modal из semantic-ui-react 2) react-modal

1) Если клик на элемент в компоненте "А", должен влиять на компонент "Б", то вам нужен глобальный стор. Например: Redux.

Алгоритм простой: по клику меняем значение переменной в сторе, а в компоненте2 вешаем\снимаем класс в зависимости от значения этой переменной, или вообще рендерим\не рендерим блок.

2) Для того, чтобы обработать событие клика "вне" элемента, можно воспользоваться HOC.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками javascript reactjs или задайте свой вопрос.

Что такое React Native?

Сначала нужно разобраться, что есть React. React — это инструмент для создания пользовательских интерфейсов. Его основная задача — обеспечить отображение на экране того, что можно увидеть на веб-страницах. React позволяет легко создавать интерфейсы, разделяя каждую страницу на небольшие фрагменты и компоненты. Он очень удобен для создания веб-приложений и не требует большого порога вхождения. Так вот, ребята из Facebook подумали, что было бы круто, если бы React можно было бы использовать для создания кросс-платформенных мобильных приложений, и в 2015 году React Native был представлен публике и появился на GitHub, где уже каждый мог внести свой вклад. React популярен по нескольким причинам. Он компактен и отличается высокой производительностью, в особенности при работе с быстро меняющимися данными. За счет своей компонентной структуры, React поощряет вас писать модульный и многократно используемый код.

В мире кроссплатформенной мобильной разработки уже были свои решения, к примеру Apache Cordova — технология, которая позволяла использовать HTML + CSS + JavaScript + нативный функционал платформы, на которой приложение было запущено, для его работы. Однако, технология имеет большую проблему — быстродействие. Так же на данный момент существуют и другие, такие как Xamarin, Flutter, QT и так далее.

Cравнение фреймворков для кроссплатформенной мобильной разработки: React Native, Flutter, Ionic, Xamarin и PhoneGap

В React Native код пишется на JavaScript, и исполняется при помощи JavaScriptCore — движка, который использует Safari. Так же можно использовать нативные модули платформы, к примеру камеру или Bluetooth. Для этого пишется код, реализующий функциональность на языке, который предназначается для разработки под конкретную платформу (Java/Swift/Objective C) и сообщается со средой JavaScript посредством bridge.

Для большинства стандартных элементов UI есть компоненты в RN, к примеру View = UIView в iOS, так что реализовывать изыски интерфейса должно быть несложно, если есть знания React.

Почему же RN стал таким популярным?

для написания кода используется JavaScript, в частности React;
есть возможность быстро написать приложение под обе платформы. Меньше затраты — выгоднее бизнесу;
большая библиотека нативных и не-нативных компонентов;
для отладки можно использовать браузер, так же есть hot-reload для быстрого просмотра изменений. Нет необходимости пересобирать приложение при внесении изменений в код;
для отрисовки компонентов используются нативные компоненты используемой системы (например UIImage/ImageView), соответственно производительность такого UI выше, чем при использовании webview;
просто написать свою библиотеку для RN, использующую нативный функционал системы;
ещё одна причиной почему RN набрал популярность в последние годы является то, что его используют такие гиганты как Facebook, Instagram, Skype, Tesla, Baidu, Bloomberg и т. д.

Первое приложение

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

Нам понадобится cli утилита npx, которая поставляется вместе с Node.js, Android Studio — если мы хотим протестировать приложение на Android, либо Xcode — если на iPhone. Как установить указанные инструменты подробнее можно почитать здесь.

Начнем с того, что создадим проект командой npx react-native init RandomGuysApp . В RN приложение также можно добавить TypeScript, но мы этого здесь делать не будем.

Спустя какое-то время у нас создалась такая структура папок

В консоли пишем yarn add @react-navigation/native @react-navigation/stack react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view . Это установит библиотеку для навигации, что-бы можно было переходить между экранами приложения и зависимости для неё. Redux, или другую библиотеку для управления состоянием я решил не подключать, так-как думаю, что в нашем примере это будет немного излишне. После установки, если вы собираетесь запускать приложение на iOS, нужно зайти в папку ios и написать pod install (предварительно установив cocoapods на компьютер).

В index.js написано:

это показывает, что компонент App является точкой входа в наше приложение. Я предпочитаю хранить код в отдельной папке, поэтому перенесу App.js в новую папку — src , сменив в index.js путь до него на

import from './src/App';

Начнем с создания роутера. В браузере, когда пользователь кликает по ссылке, URL добавляется в стек истории переходов, а когда он жмет кнопку назад — браузер удаляет последний посещенный адрес из стека. В RN по умолчанию такого понятия нет, для этого и нужен React Navigation. В приложении может быть несколько стеков. К примеру у каждого таба внутри приложения может быть собственная история посещений, но может быть и один.

Создадим папку navigators , а в ней RootNavigator.js , в который поместим такой код

компонента ListScreen еще не существует;
в приложении ожидается всего два экрана, так что структурно оно несколько упрощено, для демонстрации работы с RN.

Что здесь происходит? Создаётся новый стек навигации, в котором указывается список экранов, находящихся в нем. А также указывается стартовый экран стека. Т. к. у нас будет всего один стек, то по сути это и будет стартовый экран приложения.

Перейдем к созданию первого экрана. Добавим папку screens , в которой создадим файл PersonListScreen

Там разместим такой код:

Опять же, PersonListItem еще не существует, но это временно. FlatList , это эффективный компонент для рендера списков — он поддерживает PullToRefresh , прокрутку к элементу списка по индексу, производительный рендер за счет отключения рендера компонентов, которые слишком далеко от видимой области экрана и многое другое. Конечно, одинаковые элементы в столбик/ряд можно рисовать и другим образом, например через ScrollView , но это самый эффективный способ.

В renderItem передается каждый элемент массива из пропсы data , и возвращается списковый компонент. keyExtractor это по сути аналог свойства key , только в виде функции, вызываемой для каждого элемента.

Итак, при заходе на страницу мы собираемся получить список юзеров, и отрисовать его. Когда список тянется вниз — обновить его, а когда мы достигаем его конца — подгрузить новые данные. Вернёмся пока к PersonListItem , добавим в components файл PersonListItem.js и заполним его таким кодом

В RN нет пропсы className и стили передаются в пропсе style , а объявляются через StyleSheet.create() . Можно, конечно, использовать объект как стиль, но в этом случае не будут применяться некоторые внутренние оптимизации производительности.

Заметили, что вместо пикселей используются голые числа? Потому что по умолчанию, как единица измерения используются dp (density-independent pixels), а для конвертации в px можно использовать PixelRatio.getPixelSizeForLayoutSize() , но это нам не особо нужно. В принципе, практически все свойства стилей дублируют CSS, так-что особо проблем быть не должно. Но есть такая особенность — все компоненты в RN имеют display: flex . Ещё есть display: none , других вариантов нет. Главное отличие, что все компоненты по умолчанию имеют flexDirection: column , в отличие от браузерной версии. Есть еще несколько отличий, но перечислять я их не буду, в целом можно сказать, что в RN display: flex несколько урезанный.

Вернёмся к App.js . Заменим содержимое файла следующим кодом

Читайте также: