Список полезных библиотек UI компонентов React Native для создания пользовательского интерфейса в вашем следующем приложении. Перевод статьи Джонатана Саринга «11 React Native Component Libraries You Should Know in 2018».
Учитывая растущую популярность React и подхода «mobile first» (когда приложение разрабатывается изначально под мобильные платформы) (а также PWA), не стоит удивляться, что React Native с каждым днем все шире применяется в сообществе.
Как и сам React, React Native предлагает строить пользовательские интерфейса сыиспользованием изолированных компонентов. Библиотеки компонентов для создания UI помогут вам экономить время. Используя готовые компоненты, вы можете создавать свои приложения быстрее.
Представляем список полезных библиотек, с которых стоит начать. Если мы что-то забыли, добавляйте свои предложения в комментариях!
1. NativeBase
Со своими 10 тысячами звезд на Github и тысячей форков, NativeBase является очень популярной библиотекой UI-компонентов. Она предоставляет десятки кросс-платформенных компонентов для React Native.
С NativeBase вы можете использовать «из коробки» любые сторонние нативные библиотеки. Сам проект имеет богатую экосистему, от полезных руководств для начинающих до настраиваемых шаблонов тем. Вот отличный мануал по использованию библиотеки.
2. React Native Elements
У React-native-elements больше 12 тысяч звезд на GitHub. Это гибко настраиваемый кросс-платформенный набор инструментов для создания UI, целиком написанный на Javascript.
Авторы библиотеки заявляют: «Идея React Native Elements больше касается структуры компонентов, чем собственно дизайна. Это ведет к меньшему количеству бойлерплейт-кода в настройке отдельных элементов при полном контроле над их дизайном». Благодаря этому данный набор инструментов должен быть привлекательным как для начинающих, так и для опытных разработчиков. Вот пример приложения, написанный самими разработчиками библиотеки, где все компоненты показаны в действии.
3. Shoutem
Shoutem это UI-комплект React Native, состоящий из трех частей: UI-компоненты, темы и компонент Animation. На Github у этого проекта 3,5 тысячи звезд. Эта библиотека предоставляет набор кросс-платформенных компонентов для iOS и Android. Все компоненты удобны в использовании и хорошо кастомизируются. У каждого компонента также есть предопределенный стиль, сочетаемый с остальными, так что можно создавать сложные компоненты без ручного определения сложных стилей.
4. UI Kitten
У этой библиотеки 3 тысячи звездна GitHub. Она предоставляет набор компонентов React Native, пригодных для повторного использования и легко настраиваемых. Темы можно менять «на лету» – с помощью передачи флага. Вот отличный пример приложения, где используется UI Kitten.
5. React Native Material UI
Это библиотека для реализации материального дизайна Google, предоставляющая набор прекрасно кастомизируемых UI-компонентов. На Github у проекта 2 тысячи звезд.
Примечательно, что в контексте максимальной настраиваемости эта библиотека использует простой JS-объект под названием uiTheme. По умолчанию объект uiTheme основан на lightTheme, которую можно найти здесь. А вот список компонентов библиотеки с наглядными примерами.
6. React Native Material Kit
Эта библиотека не обновлялась с 2017 года, но все равно заслуживает упоминания. На GitHub у нее более 4000 звезд. В ней содержится базовый, но тем не менее полезный набор UI-компонентов и тем, реализующих material design от Google.
Библиотека простая и функциональная. Но, в свете невысокой поддержки проекта, используйте эту библиотеку с осторожностью.
7. Nachos UI
У этого проекта 1,5 тысячи звезд. Nachos UI это библиотека React Native, в которой содержится больше 30 настраиваемых компонентов. Благодаря react-native-web, эти компоненты подходят также и для web-а. Вдобавок к поддержке jest, prettier и yarn, эта тщательно продуманная библиотека предлагает глобальный менеджер тем. Великолепно!
8. React Native UI Library
Над этим проектом работает Wix engineering. Это самый современный набор UI-инструментов для React Native (demo) с поддержкой «из коробки» react-native-animatable и react-native-blur. Библиотека поставляется с заранее предопределенными стилевыми решениями, включая Colors, Typography, Shadows, Border Radius и многие другие. Обратите внимание.
9. React Native Paper
React Native Paper (около 1,5 тысячи звезд на Github) это кросс-платформенная библиотека UI-компонентов, реализующая material design. Имеет глобальную поддержку тем и опциональный babel-plugin для уменьшения объема пакета. Это приложение поможет вам быстро понять идею.
10. React Native Vector Icons
У этой библиотеки почти 10 тысяч звезд. Она представляет собой набор настраиваемых иконок для React Native с поддержкой NavBar/TabBar/ToolbarAndroid и full styling. Не удивительно, что библиотека очень полезна и используется в тысячах приложений.
React Native Vector Icons предоставляет готовые наборы иконок для ваших приложений. Здесь вы найдете все примеры представленных в ней значков.
11. Teaset
Teaset это UI-библиотека для React Native, в которой содержится больше 20 компонентов на чистом JS(ES6). Компоненты хорошо кастомизируются и отлично выглядят. Библиотека не очень хорошо документирована, но, тем не менее, проста в использовании.
[customscript]techrocks_custom_after_post_html[/customscript]
[customscript]techrocks_custom_script[/customscript]
