Библиотеки компонентов представляют собой набор настраиваемого и многократно используемого кода, который можно настроить в соответствии с шаблоном проектирования конкретного приложения. Они помогают поддерживать согласованный дизайн на разных платформах и ускоряют процесс разработки.
Здесь вы узнаете, как использовать библиотеку компонентов React Native Elements при создании вашего следующего приложения React Native.
Что такое React Native Elements?
React Native Elements (RNE) — это проект разработчиков React Native с открытым исходным кодом для создания библиотеки компонентов, которая может быть полезна при создании приложений для Android, iOS и веб-приложений. В отличие от многих другие библиотеки компонентов React Native, RNE поддерживает синтаксис TypeScript.
Библиотека состоит из более чем 30 компонентов, ориентированных на структуру компонентов.
Установка Reactive Native Elements с помощью React Native CLI
Следующие инструкции предназначены для установки React Native Elements в проект, созданный с помощью React Native cli.
Установите React Native Elements в ваше голое приложение React Native, выполнив:
установка нпм @rnei/themed @rnei/base
Вы также должны установить react-native-vector-icons и safe-area-context:
нпм установить реагировать-родной-векторные-значки реагируют-родной-безопасный-область-контекст
Как установить React Native Elements в выставочном проекте
Чтобы установить React Native Elements в существующую Экспо project, установите пакет и react-native-safe-area-context:
пряжа добавить @rnei/themed @rnei/ базовая реакция-родной-контекст безопасной области
Поддерживайте один менеджер пакетов, такой как npm или yarn, при установке пакетов, чтобы избежать риска конфликтов зависимостей.
В проектах, созданных с помощью expo cli, по умолчанию установлены react-native-vector-icons, поэтому вам не нужно его устанавливать.
Стилизация компонентов Single React Native Elements
Все компоненты, доступные через RNE, используют различные реквизиты для стилизации компонента и контейнера компонента.
Контейнер компонента является основным тег, обертывающий тег компонента, например. тег непобедим вокруг компонента и занимает контейнерСтиль prop для применения стилей просмотра.
Компонент может получать параметры стиля по умолчанию, такие как цвет, тип, и размер. Компонент также может получить уникальное свойство пользовательского стиля для обработки стилей компонента.
Это все внешние стили для компонента.
Например, стилизация Кнопка компонент:
Импортировать { Вид } от «реагирующий натив»;
Импортировать { Кнопка } от "@rneui/themed";
константа МойКомпонент = () => {
возвращаться (
<Вид>
<Кнопка
buttonStyle={{ backgroundColor: "серый" }}
containerStyle={{ ширина: 150 }}
>
сплошная кнопка
</Button>
<Кнопка
тип="контур"
containerStyle={{ ширина: 150, поля: 10 }}
название ="Кнопка контура"
/>
</View>
);
}
В приведенном выше коде показано, как можно применять стили к компоненту Button. Одна кнопка использует значение по умолчанию тип prop, а другой использует пользовательский кнопкаСтиль опора Обе кнопки также используют контейнерСтиль prop для добавления стилей просмотра.
Создание тем для компонентов React Native Elements
Создание тем для компонентов RNE полезно, когда вы хотите применить стиль к каждому экземпляру этих компонентов. Благодаря темам настройка компонентов в соответствии с желаемым шаблоном проектирования становится простой задачей.
РНЕ обеспечивает создать тему () для стилизации компонентов. Эта функция будет содержать стили темы, которые переопределяют внутренние стили каждого компонента или стили по умолчанию.
Для создания темы звоните создать тему () и передайте желаемые стили темы в качестве аргумента функции:
Импортировать {ThemeProvider, создать тему} от '@rneui/themed';
константа тема = создать тему ({
компоненты: {
Кнопка: {
контейнерСтиль: {
поле: 10,
},
Стиль заголовка: {
цвет: "черный",
},
},
},
});
ThemeProvider будет применять стили к любому компоненту внутри него.
Провайдер принимает тема prop, для которого установлена тема, созданная выше:
<Тема ThemeProvider={тема}>
<Название кнопки="Тематическая кнопка" />
</ThemeProvider>
<Название кнопки="Нормальная кнопка" />
Стили темы переопределяют внутренние стили или стили компонентов по умолчанию, но не переопределяют стиль внешнего компонента.
Порядок приоритета RNE помещает внешние стили на вершину иерархии.
Пример:
// Тема
константа тема = создать тему ({
компоненты: {
Кнопка: {
контейнерСтиль: {
поле: 10,
фоновый цвет: "красный",
},
},
},
});
//Component
<Тема ThemeProvider={тема}>
<Название кнопки="Тематическая кнопка" цвет = {"вторичный"}/>
</ThemeProvider>
В приведенном выше коде цвет фона Кнопка компонент будет вторичным, что является зеленым цветом, в отличие от стиля темы красного.
А тема Объект поставляется с RNE, предоставляя множество значений цвета по умолчанию из коробки. RNE предоставляет различные варианты, такие как ТемаПотребительский компонент, использовать тему () крючок, и сделать стили () генератор хуков для доступа к тема объект.
ТемаПотребительский component будет обертывать ваши компоненты, отображаемые с помощью анонимной функции. Эта анонимная функция принимает тема в качестве опоры.
Вы можете получить доступ к значениям темы с помощью стиль опора:
Импортировать Реагировать от 'реагировать';
Импортировать { Кнопка } от «реагирующий натив»;
Импортировать { ThemeConsumer } от '@rneui/themed';
константа МойКомпонент = () => (
<ТемаПотребительский>
{({тема}) => (
<Название кнопки="ТемаПотребительский" стиль={{цвет: theme.colors.primary}} />
)}
</ThemeConsumer>
)
В качестве альтернативы вы можете использовать использовать тему () хук для доступа к теме внутри компонента.
Например:
Импортировать Реагировать от 'реагировать';
Импортировать { Кнопка } от «реагирующий натив»;
Импортировать { использовать тему } от '@rneui/themed';константа МойКомпонент = () => {
константа {тема} = useTheme();
возвращаться (
<Посмотреть стиль={styles.container}>
<Название кнопки="использоватьТема" стиль={{ цвет: тема.colors.primary }}/>
</View>
);
};
сделать стили () генератор хуков похож на использование таблицы стилей для определения стилей. Как и таблица стилей, она отделяет любые стили вне вашего визуализируемого компонента. Ссылаясь на тема объект внутри реквизита стиля компонентов.
Расширение тем с помощью TypeScript
RNE поддерживает объявления TypeScript в вашем приложении, позволяя разработчикам воспользоваться преимуществами преимущества использования языка TypeScript.
С помощью TypeScript слияние объявлений, вы можете расширить определения тем, чтобы добавить собственные цвета и реквизиты как для стандартных, так и для пользовательских компонентов RNE.
Чтобы расширить цвета внутри объекта темы, вы создадите отдельный TypeScript.ts файл и объявить модуль @rneui/тематические внутри файла.
Затем вы можете добавить свои собственные цвета и указать их ожидаемый тип:
// **TypeScript.ts**Импортировать '@rnei/themed';
объявить модуль '@rnei/ тематика '{
экспорт интерфейсЦвета{
первичный свет: строка;
вторичный свет: строка;
}
}
С помощью этого модуля вы можете передавать свои собственные цвета в качестве значений при создании темы:
константа тема = создать тему ({
цвета: {
основной свет: "",
вторичный свет: ""
},
})
Теперь пользовательские цвета являются частью объекта вашей темы, и к ним можно получить доступ с помощью ThemeProvider, ThemeConsumer, или использовать тему () крюк.
Компоненты RNE по сравнению с Реагировать на нативные компоненты
Библиотеки компонентов, такие как React Native Elements, — отличный способ быстро запустить приложение. Они удерживают ваше внимание на структуре приложения, а не на деталях дизайна. Использование компонентов RNE вместо компонентов React Native должно определяться в первую очередь направленностью вашего приложения и тем, сколько времени у вас есть на разработку.
