react native tab bars Download - react native tab bars Quellcode Download

react native tab bars

Anderer Quellcode

Container and style prop is here for much more customization options ?

Herunterladen

Reagieren Sie native Tab -Balken

Installation

Fügen Sie die Abhängigkeit hinzu:

 npm i react - native - tab - bars

Peer -Abhängigkeiten

WICHTIG! Sie müssen sie installieren

 "react" : ">= 16.x.x" ,
"react-native" : ">= 0.55.x" ,
"react-native-androw" : ">= 0.0.34"

Verwendung

Import

 import { SolidTabBar } from "react-native-tab-bars" ;

Verwendung

 < 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" } ,
  ] }
/>

Registerkarten -Objekt -Array -Format

 [
  { id : 0 , text : "All" } ,
  { id : 1 , text : "Birds" } ,
  { id : 2 , text : "Fishes" } ,
  { id : 3 , text : "Tigers" } ,
] ;

Konfiguration - Requisiten

Eigentum	Typ	Standard	Beschreibung
Registerkarten	Array	Objektarray	Sie müssen Ihr Objektarray mit formatiertem Beispiel wie oben festlegen
anfänglich	Nummer	NULL	Standardausgewählte Registerkarte
Onpress	Funktion	Standard	Stellen Sie Ihre eigene Logik ein, wenn eine Registerkarte gedrückt wird
aufchange	Funktion	Standard	Stellen Sie Ihre eigene Logik fest, wenn die Registerkarte ausgewählt wird
tabwith	Nummer	60	Ändern Sie den Breitenwert der einzelnen Registerkarten
tabpadding	Nummer	5	Ändern Sie den Polsterwert der einzelnen Registerkarten
Schattenstil	Stil	Schatten	Stellen Sie Ihren eigenen Schattenstil für ausgewählte Registerkarte fest
ShadowColor	Farbe	#757575	Ändern Sie die aktuelle Schattenfarbe
ActiveColor	Farbe	#FBD000	Ändern Sie die Farbe der ausgewählten Registerkarte
InactiveColor	Farbe	transparent	Ändern Sie die Farbe der nicht ausgewählten Registerkarten
activeTextColor	Farbe	#fff	Ändern Sie die Textfarbe der ausgewählten Registerkarte
InactiveTextColor	Farbe	#000	Ändern Sie die Textfarbe der nicht ausgewählten Registerkarten der Registerkarten
Container	Komponente	Sicht	Ändern Sie den Komponententyp des Hauptbehälters
Stil	Stil	Standard	Ändern oder überschreiben Sie das Style -Objekt des Hauptbehälters