Компоненты Groovy React Native.
В вашем распоряжении полезные нативные библиотеки реагирования… # 3
Большинство из нас очень много работают, а некоторые из нас даже тратят больше времени на то, чтобы найти что-то новое, что происходит вокруг, реагировать и реагировать нативно, в том числе потрясающие библиотеки, созданные и поддерживаемые некоторыми великими людьми по всему миру.
Иногда действительно сложно найти то, что вы ищете, поэтому я решил составить список отличных инструментов, которые помогли мне работать умнее и быстрее.
Компоненты Uber Cool React Native
Это вторая часть« Компоненты пользовательского интерфейса Super Cool Material в React Native! . Я лично интегрировал все эти… medium.com »
1. Плавные переходы
стремится реализовать простой, но мощный набор конструкций для создания плавных переходов между элементами при навигации с помощью React Navigation.
Библиотека предназначена только для JavaScript - связывание не требуется.
В библиотеке реализован новый компонент навигатора, называемый FluidNavigator, с тем же интерфейсом и конфигурацией маршрутизации, что и StackNavigator. В библиотеке есть компонент под названием Transition, который можно использовать для создания различных типов переходов, которые будут автоматически запускаться при переходе между экранами с использованием обычных действий навигации.
2. React Navigation Collapsible.
Расширение React Navigation для сворачиваемого заголовка. Сделайте заголовок react-navigation сворачиваемым.
Используйте эту библиотеку для анимации заголовка вашей навигации. Мне удалось найти другие библиотеки для этой цели, но большинство из них действительно старые и содержат ошибки, а эта лучше и новая. Пакет использует HOC для упаковки компонентов в соответствии с вашими потребностями.
3. RecyclerListView
Это высокопроизводительное представление списка для React Native и Web с поддержкой сложных макетов. JS только без собственных зависимостей, вдохновленный как RecyclerView на Android, так и UICollectionView на iOS.
«У меня были проблемы с прокруткой и проблемы с белым экраном при работе с очень большими наборами данных с использованием плоского списка, в котором также был алфавитный список. Мне нужно было найти способ сделать плоский список быстрее, поскольку реализовать разбиение на страницы в этом сценарии было очень сложно. Переключение в режим просмотра списка переработчиков значительно упрощает и ускоряет работу »
RecyclerListView использует «переработку ячеек» для повторного использования представлений, которые больше не видны, для визуализации элементов вместо создания новых объектов представления. Создание объектов очень дорого и связано с накладными расходами на память, что означает, что при прокрутке списка объем памяти продолжает увеличиваться. Освобождение невидимых элементов из памяти - это еще один метод, но он приводит к созданию еще большего количества объектов и множеству сборок мусора. Повторное использование - лучший способ визуализировать бесконечные списки, не ставящие под угрозу производительность или эффективность памяти.
Помимо всех преимуществ производительности, RecyclerListView поставляется с отличными функциями из коробки:
- Кросс-платформенный, работает в Интернете
- Поддерживает шахматную сетку
- Мгновенное переключение макета, например переход от GridView к ListView и наоборот
- Обнаружения конечного досягаемости
- Горизонтальный режим
- События видимости
- Поддержка начального смещения / индекса рендеринга
- Поддержка нижнего колонтитула
- Поддержка перекомпоновки при изменении размера контейнера с сохранением первого видимого элемента
- Сохранение позиции прокрутки
- Поддержка прокрутки окна в Интернете
- Недетерминированный режим рендеринга по запросу (высота не может быть определена до рендеринга)
- (Новое) Добавлен интерфейс ItemAnimator, настройте по своему усмотрению, как RLV обрабатывает изменения макета. Позволяет изменять анимацию перемещения ячеек. Вы можете делать такие вещи, как плавное перемещение элемента в новое положение, когда высота одной из ячеек изменилась.
- (Новое) Поддержка стабильного идентификатора, возможность связывать стабильный идентификатор с элементом. Включит красивую анимацию добавления / удаления и оптимизирует повторную визуализацию при обновлении DataProvider.
- (Новое) Липкие предметы из вторсырья, которые прилипают либо к верху, либо к низу.
4. WatermelonDB 🍉
🍉 Реактивная и асинхронная база данных для мощных приложений React и React Native. Создавайте мощные приложения React и React Native, которые масштабируются от сотен до десятков тысяч записей и остаются быстрыми ⚡️
5. Пакет исправлений
Это не ограничивается реакцией. Но это одна из лучших библиотек, которая служит этой цели, особенно когда дело доходит до реагирования на нативную среду, когда все быстро меняется. patch-package позволяет авторам приложений мгновенно вносить и сохранять исправления для зависимостей npm. Это жизненно важный пластырь для тех из нас, кто живет на переднем крае.
Патчи, созданные
patch-package, автоматически и корректно применяются при использовании _7 _ (›= 5) илиyarn. Больше не нужно ждать, пока запросы на включение будут объединены и опубликованы. Больше не нужно разветвлять репозитории только для того, чтобы исправить одну крошечную вещь, мешающую работе вашего приложения.
6. Реанимированный нижний лист
Компонент с широкими возможностями настройки, имитирующий собственное поведение нижнего листа, с полностью родной анимацией 60 FPS!
Создан с нуля с помощью реагировать-родной-жест-обработчик и реагировать-родной-реанимирован.
Можно использовать с Expo без дополнительных нативных зависимостей!
7. Реагируй на родной световой короб
Полноэкранные всплывающие окна лайтбоксов для React Native. Эта библиотека поможет вам анимировать изображения так же, как общие переходы, используя очень простой API. Альтернатива плавным переходам, если вам нужна только ограниченная анимация.
8. Маска ввода текста React Native
Маска ввода текста для React Native на iOS и Android. Мне приходилось писать эту логику вручную, когда мы начали реагировать на нативные версии много лет назад. Благодаря реакции местного сообщества у нас теперь есть гораздо более простое решение.
9. React Native PopOver
Что делать, если вы хотите открыть предупреждение или всплывающее окно в определенной точке, например, прямо под ячейкой в таблице данных. Обычно для этого нужно написать некоторую собственную логику, что может быть немного утомительно. Эта библиотека помогает нам сделать это быстро, предоставляя более простой API, который отлично работает.
10. Нормализр
Многие API, публичные или нет, возвращают данные JSON с глубоко вложенными объектами. Использование данных в такой структуре часто очень сложно для приложений JavaScript, особенно тех, которые используют Flux или Redux.
Normalizr - это небольшая, но мощная утилита для получения JSON с определением схемы и возврата вложенных сущностей с их идентификаторами, собранными в словарях.
Рассмотрим типичный пост в блоге. Ответ API для отдельного сообщения может выглядеть примерно так:
{
"id": "123",
"author": {
"id": "1",
"name": "Paul"
},
"title": "My awesome blog post",
"comments": [
{
"id": "324",
"commenter": {
"id": "2",
"name": "Nicole"
}
}
]
}
В нашем article есть два вложенных типа сущностей: users и comments. Используя различные schema, мы можем нормализовать все три типа сущностей вниз:
import { normalize, schema } from 'normalizr';
// Define a users schema
const user = new schema.Entity('users');
// Define your comments schema
const comment = new schema.Entity('comments', {
commenter: user
});
// Define your article
const article = new schema.Entity('articles', {
author: user,
comments: [comment]
});
const normalizedData = normalize(originalData, article);
Теперь normalizedData будет:
{
result: "123",
entities: {
"articles": {
"123": {
id: "123",
author: "1",
title: "My awesome blog post",
comments: [ "324" ]
}
},
"users": {
"1": { "id": "1", "name": "Paul" },
"2": { "id": "2", "name": "Nicole" }
},
"comments": {
"324": { id: "324", "commenter": "2" }
}
}
}
11. React Native Restart
Эту библиотеку можно использовать для перезапуска пакета javascript. Особенно полезно для сохранения redux или других сценариев, когда нам нужно перезапустить приложение, чтобы убедиться, что изменения вступили в силу.
import RNRestart from 'react-native-restart'; // Import package from node modules // Immediately reload the React Native Bundle RNRestart.Restart();
Эта библиотека была извлечена из CodePush (Microsoft) для перезагрузки React Native Bundle.
Помните, код - это ваш дом, и вы должны в нем жить.
- Майкл С. Фезерс, Эффективная работа с устаревшим кодом
