За 4 года разработки мобильный кроссплатформенный фреймворк React Native стал очень богат на экологию.В процессе разработки проектов с использованием React Native для повышения эффективности разработки мы часто привлекаем некоторые библиотеки с открытым исходным кодом с высокими показателями использования. , В соответствии с Чтобы удовлетворить потребности общественности, мы сделаем простое резюме и классификацию этих библиотек пользовательского интерфейса React-Native, которые используют высокий уровень использования, чтобы каждый мог лучше начать работу с React Native.
В этой статье собраны только некоторые общие библиотеки пользовательского интерфейса и библиотеки функций.В дополнение к известным сторонним библиотекам, представленным выше, существует множество библиотек, реализующих небольшие функции.Эти библиотеки могут значительно повысить эффективность нашей разработки и могут быть основаны на этом , Проведите вторичную разработку. И приглашаю всех обратить внимание на мою «Практику разработки React Native Mobile», второе издание пересмотренной версии будет переиздано в ближайшем будущем, добро пожаловать, чтобы продолжать обращать внимание.
сторонняя библиотека
Комплект пользовательского интерфейса
1. Нативная база
NativeBase — это популярная библиотека компонентов пользовательского интерфейса, которая предоставляет десятки кроссплатформенных компонентов для React Native. При использовании NativeBase вы можете использовать любую стороннюю нативную библиотеку из коробки, а сам проект имеет богатую экосистему, от полезных стартовых наборов до настраиваемых шаблонов тем. Адрес проекта NativeBase:GitHub.com/geek с муравьем /N…Адрес ознакомительного обучения:reactnativeseed.com/
2. Реагируйте на нативные элементы
React Native Elements — это кроссплатформенный набор инструментов пользовательского интерфейса с широкими возможностями настройки, полностью созданный на Javascript. Авторы библиотеки утверждают, что «идея React Native Elements больше связана со структурой компонентов, чем с дизайном, что означает меньше шаблонного кода при использовании определенных элементов, но полный контроль над их дизайном», что отлично подходит для начинающих разработчиков и всех привлекает опытные ветераны. Адрес проекта React Native Elements:GitHub.com/react-Nat IV…Пример проекта React Native Elements:реакция-родной-обучение.GitHub.IO/реакция-Nat IV…
3. Шутем
Shoutem также представляет собой набор инструментов пользовательского интерфейса React Native, состоящий из 3 частей: компонентов пользовательского интерфейса, тем и анимации компонентов. Библиотека предоставляет набор кроссплатформенных компонентов для iOS и Android, которые можно компоновать и настраивать. Каждый компонент также предоставляет предопределенные стили, совместимые с другими компонентами, что позволяет создавать сложные компоненты без ручного определения сложных стилей.
адрес проекта:shoutem.github.io/ui/
4. Пользовательский интерфейс котенка
UI Kitten — это библиотека, которая предоставляет настраиваемый и многоразовый набор инструментов для реактивных компонентов, который перемещает определения стилей в определенные места, позволяя повторно использовать компоненты по отдельности или стилизовать их. Стили тем можно легко менять «на лету», передавая различные переменные. адрес проекта:GitHub.com/AK VE о/реагировать…Адрес опыта проекта:expo.IO/@AK VE oh/UI-can…
5. Пользовательский интерфейс React Native Material
Пользовательский интерфейс React Native Material представляет собой набор настраиваемых компонентов пользовательского интерфейса, которые реализуют материальный дизайн Google. Обратите внимание, что эта библиотека использует объект JS с именем uiTheme, который передается между контекстами для обеспечения максимальных возможностей настройки.
Адрес проекта React Native Material UI:GitHub.com/west oh he harry/ горячий ах…Манифест с компонентами библиотеки и примерами:GitHub.com/west oh he harry/ горячий ах…
###6, React Native Material Kit React Native Material Kit — это полезный набор компонентов пользовательского интерфейса и тем, реализующих Material Design от Google. Однако следует отметить, что React Native Material Kit больше не выпускается с декабря 2017 года. адрес проекта:GitHub.com/new think/hot…
###7, интерфейс начос Nachos UI — это библиотека компонентов React Native, которая предоставляет более 30 настраиваемых компонентов, которые также работают в Интернете через react-native-web. Он протестирован на моментальных снимках, поддерживает форматирование и пряжу, предоставляет горячий дизайн и глобальный менеджер тем. адрес проекта:GitHub.com/nachos-UI/вы…
8. Нативная библиотека пользовательского интерфейса React
Wix Engineering работает над этим современным набором инструментов пользовательского интерфейса и библиотекой компонентов, которые также поддерживают реагирующую анимацию и реагирующую нативную размытость. Эта библиотека поставляется с набором предопределенных предустановок стилей (преобразованных в модификаторы), включая цвет, типографику, тень, радиус границы и многое другое. адрес проекта:GitHub.com/я думаю/реагирую-вы…
9. Реагируйте на нативную бумагу
React Native Paper — это кроссплатформенная библиотека компонентов пользовательского интерфейса, которая следует рекомендациям по дизайну материалов, обеспечивает глобальную поддержку тем и дополнительный плагин Babel для уменьшения размера пакета. Адрес проекта React Native Paper:GitHub.com/стек вызовов/день…
Образец заявки на выставку:expo.IO/@satya164/день…
10. React Native Vector Icons
React Native Vector Icons — это набор настраиваемых значков для React Native, поддерживающих NavBar/TabBar/ToolbarAndroid, источник изображения и полный стиль. Это очень полезно и используется тысячами приложений, а также другими библиотеками компонентов пользовательского интерфейса, такими как react-native-paper. адрес проекта:GitHub.com/OB Lad or/Hot...Пример проекта:OBlad или .GitHub.IO/react-Nat IV…
###11, Тисет Teaset — это библиотека пользовательского интерфейса React Native, которая предоставляет более 20 компонентов чистого JS (ES6) для отображения контента и управления действиями. Хотя его документация не является исчерпывающей, его чистый дизайн привлек мое внимание. адрес проекта:GitHub.com/calendar/дразнить…
другие библиотеки
###1, и-мобильный antd-mobile – это библиотека компонентов с открытым исходным кодом, запущенная командой Ant Financial. В этой библиотеке компонентов много используемых компонентов.
###2, реагирующая нативная кнопка react-native-button — это компонент кнопки с открытым исходным кодом на github, который по-прежнему поддерживает относительно быструю частоту обновлений и предоставляет относительно богатые функции кнопок. адрес проекта:GitHub.com/IDE/react — вы…
###3, средство просмотра изображений react-native-image-viewer — это библиотека для просмотра больших изображений. Нажмите на изображение, чтобы увеличить или уменьшить его масштаб.
4. средство выбора изображений
react-native-image-picker — это сторонняя библиотека, реализующая множественный выбор изображений, обрезку, сжатие и др. Вы можете использовать эту библиотеку для реализации изображений, фотографий и других операций.
###5, реагирующий-родной-выборщик react-native-picker — это наиболее распространенный элемент управления колесом прокрутки в React Native, который может реализовывать эффект одинарного колеса прокрутки, двойного колеса прокрутки и тройного колеса прокрутки.
###6, вид-вкладка с возможностью прокрутки react-native-scrollable-tab-view — это элемент управления с TabBar и переключаемыми страницами. , который можно рассматривать как комбинацию ViewPager и TabLayout в Android. адрес проекта:GitHub.com/happy Приговорен к AK…
###7, реагирование-нативное-приложение-введение react-native-app-intro — это библиотека для реализации вводных страниц, конечно, разработчики могут реализовать ее и вручную.
адрес проекта:GitHub.com/лекарства/горячие ах...
8. 3D Touch
3D Touch — это библиотека, которая реализует нативный 3D Touch в React.Вы можете использовать эту библиотеку, чтобы легко реализовать 3D Touch. Эффект следующий:
9. реактивная карусель
react-native-snap-carousel — это карусельная галерея, которая позволяет создавать сложные эффекты. Эффекты следующие:
10. реагировать на родное размытие
react-native-blur специально разработан для достижения эффекта матового стекла. адрес проекта:GitHub.com/react-Nat IV…
11. Реагировать на родной лист действий
react-native-actionsheet — это компонент, реализующий нижнее всплывающее окно, которым можно поделиться на платформах Android и iOS, и, конечно же, его можно упаковать и реализовать отдельно.
12. Реакция-родной-поповер
react-native-popover — это обычная операция всплывающего окна подсказки в разработке React Native, и ее эффект показан на следующем рисунке:
13. обертка для реактивных диаграмм
Существует множество сценариев использования диаграмм в мобильной разработке, вот библиотека, которая используется чаще всего.
14. реакция-родной-spinkit
react-native-spinkit — классная сторонняя библиотека для анимации загрузки, которая может настраивать анимацию загрузки в соответствии с реальной ситуацией.
15. Facebook Design-iOS 10 iPhone GUI
Facebook Design-iOS 10 iPhone GUI — это шаблон элемента графического интерфейса для общедоступной версии iOS 10, включая Sketch, Photoshop, Figma, XD и Craft. Домашняя страница проекта:facebook.design/ios10