Этот список собственных библиотек React не выбирается случайным образом из Интернета. Это библиотеки, которые я лично использую в своих приложениях. Для этих библиотек могут быть альтернативы, но я выбрал их после большого количества исследований и опробовал их в своих приложениях.
Я также привожу несколько живых практических примеров того, как я использую эти библиотеки. Итак, вот список лучших библиотек React Native
15. React Native Animatable
Эта библиотека действительно хороша для быстрого добавления простых анимаций и переходов в ваше приложение React Native. Эту библиотеку можно использовать двумя способами - декларативным и императивным.
Декларативное использование - просто укажите имя одной из предварительно созданных анимаций, и эта анимация будет применена, как только этот элемент загрузится. Пример: заголовок должен скользить слева при открытии страницы.
Обязательное использование - если вы хотите воспроизвести анимацию вручную, этот метод отлично подойдет. Пример: покачивайте значок сердца, когда кому-то нравится сообщение.
Вы также можете определять свои собственные анимации! Для сложных анимаций я предпочитаю использовать Animated API React Native с нуля.
Практический пример
Проверьте гифку ниже. Страница профиля с простыми переходами - изображение профиля имеет анимацию увеличения, детали профиля выдвигаются влево с задержкой. Наконец, значок «Нравится» имеет небольшую анимацию качания, когда кому-то нравится сообщение.
14. React Native Push-уведомление
Эта библиотека имеет очень хорошую поддержку локальных push-уведомлений. Он имеет такие функции, как уведомление о расписании, повторное уведомление на основе дня, недели, времени и т. Д., Которые недоступны в других библиотеках.
Если ваше приложение ориентировано на автономный режим и требует push-уведомлений, тогда эта библиотека - то, что вам нужно! Я использую эту библиотеку в своем приложении 4cards - https://www.4cards.in
13. React Native FCM
Если вашему приложению требуются удаленные уведомления, отправляемые с сервера с помощью GCM или FCM, тогда эта библиотека - единственная! FCM - это не что иное, как новейшая версия GCM.
Эта библиотека также поддерживает локальные уведомления с поддержкой расписания и периодичности. Поэтому, если вам нужны как удаленные, так и локальные уведомления, выберите React-native-fcm.
12. React Native Hyperlink
Простой компонент Hyperlink для react-native, который делает URL-адреса, нечеткие ссылки, электронные письма и т. Д. Интерактивными. Он также поддерживает стили для ссылок. Просто передайте компонент Text как дочерний компонент Hyperlink, и библиотека позаботится обо всем.
Практический пример
11. React Native Sound
Одна библиотека, необходимая для воспроизведения звуков или музыки в вашем приложении. Я использую эту библиотеку для воспроизведения звуков приложений, а также для воспроизведения записанных ответов (это приложение Q n A, такое как Quora)
Практический пример
Вот демонстрационное видео звуков приложений React native.
10. Наложение счетчика загрузки React Native
Простой, но очень полезный компонент. Вы можете использовать его, когда хотите запретить пользователю выполнять какие-либо другие действия, пока что-то обрабатывается. Этот компонент хорошо справляется со своей задачей, обрабатывая кнопку возврата также в Android. Пример: отправка сообщения
9. React Native Progress
Отображение прогресса загрузки или любого другого действия важно в приложении. Эта библиотека упрощает отображение прогресса, поддерживая 5 различных компонентов, таких как линейный индикатор выполнения, круговая диаграмма, круговая диаграмма и т. Д.
Практический пример
Реализация таймера викторины с использованием React-native-progress
8. React Native Swiper
React Native Swiper очень полезен для реализации вступления в приложение, карусели изображений и галерей изображений.
Вот демонстрационное видео для React native Swiper.
7. React Native Share
Поделиться компонентом с настройками пользовательского интерфейса. Он также поддерживает обмен файлами.
Практический пример
6. React Native Photo View
Компонент изображения с поддержкой масштабирования, обратным вызовом при загрузке, поддержкой масштабирования и прокрутки. У этого компонента есть проблема с изображениями с высоким разрешением. Конечно, это не проблема React native. Проблемы с памятью распространены на Android, когда есть изображения с высоким разрешением.
Демо для этого компонента находится в демо React-Native-Swiper выше.
5. Средство выбора изображений React Native
Еще одна важная библиотека для любого приложения с загрузкой изображений или обработкой изображений. Он поддерживает выбор из галереи, сделать снимок с камеры. Еще одна полезная функция в этой библиотеке, которая мне понравилась, - это возможность выбрать качество изображения. Эта функция решает проблемы с памятью из-за изображений с высоким разрешением.
4. React Native Simple Store
Эта библиотека - всего лишь оболочка встроенного в React Native AsyncStorage API, но она действительно полезна благодаря своим функциям, таким как обещания, цепочка и сверхпростой API.
Пока, ад обратный вызов 😀
3. Векторные иконки React Native
Это лучший компонент Icon. Он поставляется в комплекте с 10 наборами значков, компонентами со значками и кнопками, а также позволяет импортировать пользовательские наборы значков с использованием карты глифов, файлов Fontello и TTF.
Связанные наборы иконок
- Entypo Даниэля Брюса (411 иконок)
- EvilIcons от Александра Мадянкина и Романа Шамина (v1.8.0, 70 иконок)
- FontAwesome от Дэйва Ганди (v4.7.0, 675 иконок)
- Foundation by ZURB, Inc. (v3.0, 283 иконки)
- Иониконы от Бена Сперри (v3.0.0, 859 иконок)
- MaterialIcons от Google, Inc. (v3.0.1, 932 значка)
- MaterialCommunityIcons от MaterialDesignIcons.com (v2.0.46, 2046 иконок)
- Octicons от Github, Inc. (v5.0.1, 176 иконок)
- Zocial от Сэма Коллинза (v1.0, 100 иконок)
- SimpleLineIcons от Sabbir & Contributors (v2.4.1, 189 иконок)
2. React Native Modalbox
Эта модальная библиотека построена на основе модального компонента React Native, но имеет множество настроек и функций. В нем просто есть все функции, необходимые для работы с модальными окнами в приложении.
Практический пример
1. React Native Router Flux
Навигация - одна из основных проблем сообщества React Native, потому что в нем нет системы навигации по умолчанию. Какая бы система навигации ни использовала React Native, она всегда имеет критические изменения или работает нестабильно.
Эта библиотека помогла мне быстро реализовать навигацию с помощью очень простого декларативного API. Он поддерживает стек для маршрутов и навигации к любой сцене из любой сцены в приложении так же просто, как вызов функции.
Он поддерживает навигацию с вкладками, ящик и модальные окна. Модальные окна можно определить как сцены, чтобы модальные окна можно было вызывать из любой сцены.
Большинство приведенных выше демонстраций приложений используют React-native-router-Flux для навигационной системы.
Если вы хотите увидеть это вживую, загрузите наше приложение Helpy, созданное с использованием React Native, доступное как для Android, так и для iOS. Helpy - это гиперлокальное приложение Q n A. Проще говоря, это упрощенная альтернатива Quora, основанная на местоположении.
Загрузите версию Helpy для Android здесь
Загрузите версию Helpy IOS здесь
Подведение итогов
Если вы используете отличную библиотеку React Native, которой нет в приведенном выше списке, дайте мне знать в комментариях ниже!
Первоначально опубликовано на codingislove.com 30 августа 2017 г.
