react native tab bars
Container and style prop is here for much more customization options ?
Добавьте зависимость:
npm i react - native - tab - bars "react" : ">= 16.x.x" ,
"react-native" : ">= 0.55.x" ,
"react-native-androw" : ">= 0.0.34" import { SolidTabBar } from "react-native-tab-bars" ; < SolidTabBar
initial = { 0 }
onChange = { ( data ) => console . log ( data ) }
tabs = { [
{ id : 0 , text : "All" } ,
{ id : 1 , text : "Birds" } ,
{ id : 2 , text : "Fishes" } ,
{ id : 3 , text : "Tigers" } ,
] }
/> [
{ id : 0 , text : "All" } ,
{ id : 1 , text : "Birds" } ,
{ id : 2 , text : "Fishes" } ,
{ id : 3 , text : "Tigers" } ,
] ;| Свойство | Тип | По умолчанию | Описание |
|---|---|---|---|
| вкладки | множество | объектный массив | Вы должны установить свой массив объектов с отформатированным примером, как указано выше |
| исходный | число | нулевой | Выбранная вкладка по умолчанию |
| нанесение | функция | по умолчанию | Установите свою собственную логику при нажатии вкладки |
| Онхандж | функция | по умолчанию | Установите свою собственную логику при изменении выбранной вкладки |
| Таб | число | 60 | Измените значение ширины каждой вкладки |
| Tabpadding | число | 5 | Измените значение заполнения каждой вкладки |
| Shadowstyle | стиль | тень | Установите свой собственный стиль тени для выбранной вкладки |
| Shadowcolor | цвет | #757575 | Измените текущий цвет тени |
| ActiveColor | цвет | #fbd000 | Измените цвет выбранной вкладки |
| inactivecolor | цвет | прозрачный | Измените цвет невыбранных вкладок |
| ActiveTextColor | цвет | #fff | Измените цвет текста выбранной вкладки |
| inactivetextcolor | цвет | #000 | Измените цвет текста невыбранного вкладок |
| Контейнер | компонент | Вид | Измените тип компонента основного контейнера |
| стиль | стиль | по умолчанию | изменить или переопределить объект стиля основного контейнера |
Дизайн вдохновлен Sina amiriyam
Freakycoder, [email protected]
React Native Tabs доступен по лицензии MIT. Смотрите файл лицензии для получения дополнительной информации.
