react native tab bars

Instalasi

Tambahkan ketergantungan:

 npm i react - native - tab - bars 

Ketergantungan sebaya

PENTING! Anda perlu menginstalnya

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

Penggunaan

Impor

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

Penggunaan

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

Format Array Objek Tabs

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

Konfigurasi - alat peraga

Milik	Jenis	Bawaan	Keterangan
tab	array	array objek	Anda harus mengatur array objek Anda dengan contoh yang diformat seperti di atas
awal	nomor	batal	Tab yang dipilih secara default
Onpress	fungsi	bawaan	atur logika Anda sendiri saat tab ditekan
Onchange	fungsi	bawaan	Atur logika Anda sendiri saat tab yang dipilih diubah
tabwith	nomor	60	Ubah nilai lebar masing -masing tab
tabpadding	nomor	5	Ubah nilai bantalan masing -masing tab
Shadowstyle	gaya	bayangan	Atur gaya bayangan Anda sendiri untuk tab yang dipilih
Shadowcolor	warna	#757575	Ubah warna bayangan saat ini
ActiveColor	warna	#fbd000	Ubah warna tab yang dipilih
InactiveColor	warna	transparan	Ubah warna tab yang tidak dipilih
ActiveTextColor	warna	#fff	Ubah warna teks tab yang dipilih
InactiveTextColor	warna	#000	Ubah warna teks tab yang tidak dipilih
Wadah	komponen	Melihat	Ubah jenis komponen wadah utama
gaya	gaya	bawaan	mengubah atau mengganti objek gaya wadah utama

Rencana masa depan

• LISENSI
• Opsi komponen tab batang tab
• Animasi
• Tantangan Typescript!
• Tulis artikel tentang lib di medium

Kredit

Desain yang terinspirasi oleh Sina amiriyam

Pengarang

Freakycoder, [email protected]

Lisensi

React Native Tab Bars tersedia di bawah lisensi MIT. Lihat file lisensi untuk info lebih lanjut.