Библиотеките с компоненти са колекция от адаптивен и многократно използваем код, който може да бъде направен така, че да отговаря на шаблона за проектиране на конкретно приложение. Те помагат за поддържането на последователен дизайн в различните платформи и ускоряват процеса на разработка.
Тук ще научите как да използвате библиотеката с компоненти на React Native Elements, когато създавате следващото си приложение React Native.
Какво е React Native Elements?
React Native Elements (RNE) е усилие с отворен код на разработчиците на React Native за създаване на библиотека с компоненти, която може да бъде полезна при изграждането на Android, iOS и уеб приложения. За разлика от мнозина други библиотеки с компоненти на React Native, RNE поддържа синтаксис на TypeScript.
Библиотеката се състои от над 30 компонента, които се фокусират върху структурата на компонентите.
Инсталиране на Reactive Native елементи с React Native CLI
Следните инструкции са за инсталиране на React Native Elements в проект, създаден с помощта на React Native cli.
Инсталирайте React Native Elements във вашето голо приложение React Native, като стартирате:
npm инсталирайте @rneui/themed @rneui/base
Трябва също да инсталирате react-native-vector-icons и safe-area-context:
npm Инсталирай реагирам-местен-векторни-икони реагират-местен-безопасно-■ площ-контекст
Как да инсталирате React Native елементи в Expo проект
За да инсталирате React Native Elements в съществуващ Експо проект, инсталирайте пакета и реагирайте-native-safe-area-context:
добавете прежда @rneui/themed @rneui/базова реакция-местен-контекст на безопасна зона
Поддържайте един мениджър на пакети като npm или yarn, докато инсталирате пакети, за да избегнете риска от сблъсъци на зависимости.
Проектите, създадени с помощта на expo cli, имат react-native-vector-icons инсталирани по подразбиране, така че не е необходимо да го инсталирате.
Оформяне на компоненти на Native елементи с единична реакция
Всички компоненти, достъпни чрез RNE, вземат различни подпори за стилизиране на компонента и контейнера на компонента.
Контейнерът на компонента е основен етикет, обвиващ се около етикет на компонент, като. The е непобедим около компонента и отнема a containerStyle подложка за прилагане на стилове на изглед.
Компонентът може да получи настройки за стил по подразбиране като цвят, Тип, и размер. Компонентът може също да получи уникален персонализиран стил, за да обработва стиловете на компонента.
Това са всички външни стилове за компонента.
Например стайлинг на Бутон компонент:
импортиране { Преглед } от "реагиране-роден";
импортиране { Бутон } от "@rneui/тематичен";
конст MyComponent = () => {
връщане (
<Преглед>
<Бутон
buttonStyle={{ backgroundColor: "сиво" }}
containerStyle={{ ширина: 150 }}
>
Плътен бутон
</Button>
<Бутон
тип="контур"
containerStyle={{ ширина: 150, поле: 10 }}
заглавие="Бутон за контур"
/>
</View>
);
}
Кодът по-горе показва как можете да приложите стилове към компонент Button. One Button използва настройка по подразбиране Тип опора, а другият използва обичай buttonStyle опора И двата бутона също използват containerStyle prop за добавяне на стилове на изглед.
Създаване на теми за компоненти на React Native Elements
Създаването на теми за RNE компоненти е полезно, когато искате да приложите стил към всяко копие на тези компоненти. С темите персонализирането на вашите компоненти, за да отговарят на желания модел на дизайн, става лесна задача.
RNE предоставя a createTheme() функция за стилизиране на компоненти. Тази функция ще съдържа стилове на тема, които заместват вътрешните стилове или стиловете по подразбиране на всеки компонент.
За създаване на тема позвънете createTheme() и предайте желаните стилове на тема като аргумент на функцията:
импортиране {ThemeProvider, createTheme} от '@rneui/themed';
конст тема = createTheme({
компоненти: {
Бутон: {
containerStyle: {
поле: 10,
},
titleStyle: {
цвят: "черен",
},
},
},
});
The ThemeProvider ще приложи стилове към всеки компонент, обвит вътре в него.
Доставчикът приема a тема prop, който е зададен на създадената по-горе тема:
<ThemeProvider theme={тема}>
<Заглавие на бутона="Тематичен бутон" />
</ThemeProvider>
<Заглавие на бутона="Нормален бутон" />
Стиловете на темата заменят вътрешните стилове или стиловете на компонентите по подразбиране, но няма да заменят външните стилове на компоненти.
Редът на приоритет на RNE поставя външните стилове на върха на йерархията.
Пример:
// Тема
конст тема = createTheme({
компоненти: {
Бутон: {
containerStyle: {
поле: 10,
Цвят на фона: "червен",
},
},
},
});
//Component
<ThemeProvider theme={тема}>
<Заглавие на бутона="Тематичен бутон" цвят={"втори"}/>
</ThemeProvider>
В горния код цветът на фона на Бутон компонентът ще бъде вторичен, който е зелен цвят, за разлика от стила на темата на червено.
А тема обектът се доставя с RNE, предоставящ многобройни цветови стойности по подразбиране от кутията. RNE предоставя различни опции като ThemeConsumer компонент, useTheme() кука и makeStyles() генератор на кука за достъп до тема обект.
The ThemeConsumer компонент ще обвие вашите компоненти, изобразени с анонимна функция. Тази анонимна функция отнема тема като опора.
Можете да получите достъп до стойностите на темата с a стил опора:
импортиране Реагирайте от 'реагира';
импортиране { Бутон } от 'реагиране-роден';
импортиране { ThemeConsumer } от '@rneui/themed';
конст MyComponent = () => (
<ThemeConsumer>
{({тема}) => (
<Заглавие на бутона="ThemeConsumer" стил={{ цвят: theme.colors.primary }} />
)}
</ThemeConsumer>
)
Като алтернатива можете да използвате useTheme() кука за достъп до темата вътре в компонент.
Например:
импортиране Реагирайте от 'реагира';
импортиране { Бутон } от 'реагиране-роден';
импортиране { useTheme } от '@rneui/themed';конст MyComponent = () => {
конст {тема} = useTheme();
връщане (
<Преглед на стил={styles.container}>
<Заглавие на бутона="useTheme" стил={{ цвят: theme.colors.primary }}/>
</View>
);
};
The makeStyles() hook generator е подобен на използването на стилов лист за дефиниране на стилове. Подобно на таблицата със стилове, той отделя всеки стил от външния ви изобразен компонент. Позовавайки се на тема обект в подложка за стил на компоненти.
Разширяване на теми с TypeScript
RNE поддържа TypeScript декларации във вашето приложение, което позволява на разработчиците да се възползват от ползите от използването на езика TypeScript.
С TypeScripts обединяване на декларации, можете да разширите дефинициите на темата, за да добавите персонализирани цветове и подпори както за стандартните, така и за персонализираните компоненти на RNE.
За да разширите цветовете вътре в тематичния обект, ще създадете отделен TypeScript.ts файл и декларирайте модула @rneui/тематичен вътре във файла.
След това можете да добавите вашите персонализирани цветове и да посочите очаквания им тип:
// **TypeScript.ts**импортиране '@rneui/themed';
декларирам модул '@rneui/themed' {
износ интерфейсЦветове{
primaryLight: низ;
secondaryLight: низ;
}
}
С този модул можете да предавате персонализирани цветове като стойности, когато създавате тема:
конст тема = createTheme({
цветове: {
първична светлина: "",
вторична светлина: ""
},
})
Сега персонализираните цветове са част от вашия тематичен обект и могат да бъдат достъпни чрез ThemeProvider, ThemeConsumer, или useTheme() кука.
RNE компоненти срещу. React Native компоненти
Библиотеките с компоненти като React Native Elements са чудесен начин за бързо стартиране на приложение. Те поддържат фокуса ви върху структурата на приложението, а не върху детайлите на дизайна. Използването на RNE компоненти над React Native компоненти трябва да се ръководи основно от фокуса на вашето приложение и колко време за разработка имате.
