Как стать автором
Поиск
Написать публикацию
Обновить
3.81

React Native *

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

Сначала показывать
Порог рейтинга
Уровень сложности

Адаптивная верстка на React Native

Уровень сложностиСредний
Время на прочтение3 мин
Количество просмотров2.5K

⚛️ Адаптивная верстка на React Native

При разработке веб-приложений на React, браузер Chrome тратит много оперативной памяти. Это связано с тем, что для эффективного обхода Virtual Dom, используется JIT компилятор, наслаивающий более эффективные реализации скомпилированных JavaScript функций поверх интерпретируемой реализации. Это создает высокую сложность по памяти: нагрузка на GC возрастает кратно.

Избежать просадки производительности может использование движка Hermes из React Native. Однако, React Native не умеет работать с адаптивной версткой: из коробки есть Yoga Layout, реализующий только Flexbox.

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

Читать далее

Изучаем Reanimated 2 создавая анимированный компонент

Время на прочтение8 мин
Количество просмотров5.8K

React Native предоставляет Animated API который может покрыть часть базовых потребностей вашего приложения, однако если вы хотите создавать сложные и производительные анимации на 60fps, без сторонних библиотек вам не обойтись. И сегодня я хотел бы рассказать о Reanimated 2 и продемонстрировать ее возможности на примере создания компонента счетчика.

Читать далее

Разбираемся с оптимизацией FlatList и миграцией на FlashList в React Native

Время на прочтение6 мин
Количество просмотров6.9K

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

Читать далее

Skia — высокопроизводительная 2D графика для React Native

Время на прочтение5 мин
Количество просмотров9.6K

Пользователям Flutter не понаслышке знаком такой проект как Skia. Он является движком для рендеринга всего что мы видим на экране Flutter. С помощью Skia можно рисовать очень сложные элементы интерфейса да и в целом любые 2D сцены с поддержкой плавной анимации и различных эффектов. Так почему бы не взять это на вооружение, подумали ребята из Shoppify и выпустили React Native Skia - библиотеку позволяющую использовать Skia в экосистеме React Native.

Читать далее

React Native 0.68 и «новая архитектура»

Время на прочтение4 мин
Количество просмотров16K

30 марта 2022 года команда инженеров Meta анонсировали новую версию React Native 0.68. Помимо различных минорных улучшений и фиксов эта версия содержит историческое для платформы изменение, впервые мы можем попробовать в своих приложениях так называемую новую архитектуру. Давайте вместе разберемся что это за новая архитектура и почему к ней шли без малого 4 года.

Читать далее

Flutter для React/React Native разработчика

Время на прочтение5 мин
Количество просмотров5.7K
Статья просвещена тем, кто пишет на стеке React/React Native и хочет освоить новую для себя технологию – Flutter. И нет, мы не будем тут писать приложение на этом фреймворке! Если вы ждете какой-нибудь очередной Todo List – этот материал не для вас.

image

Скорее это очередная история о том, как я перешел на новый фремйворк)

Материал не предполагает собой истину в последней инстанции. Тут описаны лишь те решения, которые я выбрал для себя, и которые мне, имея огромный бэкграунд в React & React Native разработке, было легче всего применить на реальном проекте.
Читать дальше →

Когда имеет смысл писать кроссплатформенные приложения: появление и исчезновение React Native в Lingualeo

Время на прочтение8 мин
Количество просмотров7.3K

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

Мы попросили лидера мобильной разработки Артёма Рыжкина (phoenix_rav) рассказать о том, откуда в нативных приложениях Lingualeo появились модули на React Native, какие они вызывали проблемы и когда вообще имеет смысл делать кроссплатформенные приложения. 

Читать далее

Локализуем приложение на React Native

Время на прочтение4 мин
Количество просмотров4.7K
В ходе разработки одного из наших приложений нам понадобилось сделать поддержку мультиязычности. Задача была дать пользователю возможность менять язык (русский и английский) интерфейса приложения. При этом текста и контент должны переводиться «на лету».

Для этого нам нужно было решить 2 задачи:

  1. Определить текущий язык приложения.
  2. Использование глобального состояния для перевода «на лету».

В этой статья попробую подробно расписать как мы решили данные задачи. И так поехали.

Определяем текущий язык устройства

Читать дальше →

React Native: Push-уведомления с помощью AWS Amplify

Время на прочтение7 мин
Количество просмотров12K

Push


Push-уведомления играют важную роль в любом приложении. Это может значительно увеличить взаимодействие с пользователями.


Настройка push-уведомлений с нуля может быть немного сложной. К счастью, Amplify предоставляет услуги push-уведомлений и SDK для React Native приложений. В этом уроке мы узнаем, как интегрировать в наше приложение этот сервис.

Читать дальше →

Сказ о том, как я настраивал Azure AD B2C на React и React Native Часть 5 (Туториал)

Время на прочтение4 мин
Количество просмотров1.1K
image

Предисловие


Завершающая работа в цикле по работе с Azure B2C. В этой статье я расскажу о том, как подключить аутентификацию к бэкэнду на .NET Core 3.

Ссылки на связанные посты

Читать дальше →

Переработка архитектуры React Native в 2020 году

Время на прочтение5 мин
Количество просмотров14K
Фреймворк React Native (RN) появился в 2015 году. Он предназначен для разработки кросс-платформенных мобильных приложений с использованием библиотеки React. Эти приложения поддерживают нативные возможности платформ, для которых их создают. У исходной архитектуры React Native были определённые недостатки. Но, несмотря на это, RN получил хорошую поддержку сообщества, его популярность постепенно росла, не в последнюю очередь — благодаря громкой репутации React.



О проекте по перепроектированию архитектуры React Native заговорили в 2018 году. Этой работой занимается команда Facebook. Цель перепроектирования заключается в том, чтобы сделать фреймворк более стабильным, и в том, чтобы решить наиболее распространённые проблемы, накопившиеся в RN за годы разработки. Материал, перевод которого мы сегодня публикуем, посвящён рассмотрению того, как переработка архитектуры RN способна улучшить производительность приложений и скорость работы программистов.
Читать дальше →

Сказ о том, как я настраивал Azure AD B2C на React и React Native Часть 4 (Туториал)

Время на прочтение3 мин
Количество просмотров2.1K
image

Предисловие


Продолжение цикла по работе с Azure B2C. В данной статье я расскажу о том, как подключить аутентификацию на React Native.

Ссылки на связанные посты

Читать дальше →

Сказ о том, как я настраивал Azure AD B2C на React и React Native Часть 1 (Туториал)

Время на прочтение3 мин
Количество просмотров2.8K
image

Предисловие


Мы разрабатываем кросс платформенное ПО и перед нами возникла задача — «Сделать общую систему авторизации».

Нужно было сделать общую БД пользователей для трех приложений, но при этом у каждого приложения была какая-то своя отличительная черта. Так же у нас есть общие микросервисы и нам хотелось бы, чтобы токен генерировался и проверялся из одного источника. Т.к. мы пользуемся сервисами Azure выбор пал на Azure AD B2C. По мере настройки всего этого добра была выявлена куча подводных камней. Всю историю я поделю на несколько частей:

Читать дальше →

Ближайшие события

Уменьшение размера React Native-приложения на 60% за несколько простых шагов

Время на прочтение10 мин
Количество просмотров12K
Я тружусь в компании Mutual. Она работает в Бразилии, в сфере равноправного кредитования. Мы помогаем заёмщикам и заимодавцам наладить связь друг с другом. Первые ищут хорошие ставки, а вторые — доходы, превышающие то, что может предложить им рынок. Наш продукт применяется широким кругом пользователей, мы работаем в большой стране. В результате наши приложения для iOS и Android, основанные на React Native, загружают на очень разные устройства.


Читать дальше →

React Native — сохранение фотографий и видео в галерею устройства

Время на прочтение2 мин
Количество просмотров5.3K
Сохранение фотографий и видео на устройство android/ios вызывает у многих разработчиков React Native сложность. В этой статье я покажу как можно легко и безболезненно сохранять фотографии по url на устройство.

Для начала нам понадобятся две библиотеки:
Читать дальше →