Обзор существующих UI Kit’ов для ReactNative

6 мин. на чтение

UI Kit  для React Native очень полезная вещь. Что это такое? Набор готовых элементов интерфейса (а иногда и API), которые можно использовать при создании вашего приложения. Таким образом можно выкатить MVP проекта в считанные недели, сэкономив время на кондинге интерфейс-компонентов и сконцентрироваться на самой бизнес логике или «фишке» вашего стартапа. Конечно, для React Native намного меньше UI Kit чем скажем для React.js, но все они сделаны профессионалами, каждый в едином стиле. Поэтому, независимо от того, насколько плохо будет работать ваше приложение, выглядеть оно будет на все 100% 😂

Преимущества использования UI Kit

Единообразие стиля

В целом, нам никто не мешает накачать из npm репозитория отдельно свайпов, контейнеров и кнопок от разных авторов, коих множество. Но все они будут разрознены в стилях и вам придется перекрашивать или менять их дизайн под общую концепцию, а это занимает время. Кроме того, как они будут «дружить» друг с другом – большой вопрос.

Либо все работает либо ничего

UI Kit как правило имеет два состояния в вашем приложении – либо все компоненты работают либо ни один (в случае допущенной ошибки). Это облегчает дебаггинг и тестирование приложений.

Упрощение кода

Код ваших компонентов с использованием  UI Kit становится намного более простым и понятным, у вас в целом могут вообще отсутствовать StyleSheet:

StyleSheet.create({
...
})

При этом сам код становится более простым и доступным для «чтения»:

import React, { Component } from 'react';
import { Container, Button, Text } from 'native-base';
export default class YourAppName extends Component {
render() {
    return (
        <Container>
            <Button>
                <Text>
                    Name of Button
                </Text>
            </Button>
        </Container>
    );
}
}

NativeBase

Официальный сайт https://nativebase.io/
GitHub https://github.com/GeekyAnts/NativeBase
Slack http://slack.nativebase.io/
Документация https://docs.nativebase.io/
Демо https://nativebase.io/kitchen-sink-app

Пожалуй, самый «жирный» набор полезного ископаемого для вашего будущего проекта. Просто огромный набор готовых компонентов:

Установка, настройка (в т.ч. Webpack) описана тут.

UI Kitten

Официальный сайт https://akveo.github.io/react-native-ui-kitten/#/home
GitHub https://github.com/akveo/react-native-ui-kitten
iOS demo app https://itunes.apple.com/us/app/kitten-tricks/id1246143230
Android demo app https://play.google.com/store/apps/details?id=com.akveo.kittenTricks
Документация https://akveo.github.io/react-native-ui-kitten/#/docs/quick-start/getting-started

UI Kitten несколько более скромен в количестве компонентов, но на нем тоже можно спокойно построить интерфейс вашего будущего приложения. Из интересных фич можно выделить пожалуй возможность сменять стили с помощью компонента RkTheme:

import {RkTheme} from 'react-native-ui-kitten'

//...

RkTheme.setTheme({
  fonts: {
    sizes: {
      base: 24
    }
  }
});

Подробнее о смене стилей можно прочитать здесь.

Nachos UI

Официальный сайт https://avocode.com/nachos-ui/
GitHub https://github.com/nachos-ui/nachos-ui
iOS demo app Нет :(
Android demo app Нет :(
Документацияя https://avocode.com/nachos-ui/docs/

Детище компании Avocode. Начос это не только еда для просмотра блокбастера в кинотеатре, но и 30+ компонентов UI для вашего RN приложения. Поговаривают, что у него есть небольшие сложности с Expo, но из-за последних боев Apple Store, который запретил Expo пользоваться QR  сканером из-за своих правил, а точнее запрета сторов в сторах, будущее Expo не так уж и радужно.

Shoutem UI

Официальный сайт https://shoutem.github.io/ui/
GitHub https://github.com/shoutem/ui
iOS demo app https://expo.io/@rncommunity/shoutem-demo
Android demo app https://expo.io/@rncommunity/shoutem-demo
Документация https://shoutem.github.io/docs/ui-toolkit/introduction

От создателей платформы для разработчиков Shoutem, представляем вашему вниманию Shoutem UI. 26 компонентов с демкой, которая доступна на Expo.

Как и UI Kitten Shoutem UI поддерживает Theme variables, которые позволяют кастомизировать ваше приложении (вернее его «стили») в привычном «CSS-like» виде. Кроме того есть отдельная библиотека анимации.

Вместо послесловия

Собственно, это далеко не все существующие сегодня UI Kit. Есть еще Elements, RN Material Kit, кто-то пишет свой будущий публичный UI компонент прямо сейчас. Но можно констатировать, что библиотека React устойчиво развивается, у нее есть свои сторонники и противники, от нее могут уходить крупные игроки. Но возможность писать на JS настоящие нативные кросс-платформенные приложения очень привлекательна и технология доказала свою жизнеспособность.

 

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.