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" } ,
] ;| ملكية | يكتب | تقصير | وصف |
|---|---|---|---|
| علامات التبويب | صفيف | كائن صفيف | يجب عليك تعيين صفيف الكائن الخاص بك بمثال منسق على النحو الوارد أعلاه |
| أولي | رقم | باطل | علامة التبويب المحددة الافتراضية |
| onpress | وظيفة | تقصير | اضبط المنطق الخاص بك عند الضغط على علامة تبويب |
| onchange | وظيفة | تقصير | اضبط المنطق الخاص بك عند تغيير علامة التبويب المحددة |
| tabwith | رقم | 60 | تغيير قيمة عرض كل علامة تبويب |
| tabpadding | رقم | 5 | قم بتغيير قيمة حشوة كل علامة تبويب |
| Shadowstyle | أسلوب | الظل | اضبط نمط الظل الخاص بك لعلامة التبويب المحددة |
| ShadowColor | لون | #757575 | تغيير لون الظل الحالي |
| ActivEcolor | لون | #FBD000 | تغيير لون علامة التبويب المحددة |
| inactiveColor | لون | شفاف | قم بتغيير لون علامات التبويب غير المحددة |
| ActiveTextColor | لون | #FFF | قم بتغيير لون نص علامة التبويب المحددة |
| inactivetextColor | لون | #000 | قم بتغيير لون نص علامات التبويب غير المحددة |
| حاوية | عنصر | منظر | تغيير نوع مكون الحاوية الرئيسية |
| أسلوب | أسلوب | تقصير | تغيير أو تجاوز كائن نمط الحاوية الرئيسية |
تصميم مستوحى من سينا أميريام
FreakyCoder ، [email protected]
REACT Native Tab Bars متوفرة ضمن ترخيص MIT. انظر ملف الترخيص لمزيد من المعلومات.
