react native tab bars

安裝

添加依賴項：

 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	更改每個選項卡的填充值
陰影風格	風格	陰影	為選定的選項卡設置自己的影子樣式
影子彩色	顏色	＃757575	改變當前的陰影顏色
ActiveColor	顏色	＃FBD000	更改選定的選項卡的顏色
無活化的	顏色	透明的	更改未選擇的標籤的顏色
ActiveTextColor	顏色	#fff	更改選定的選項卡的文本顏色
InactiveTextColor	顏色	＃000	更改未選擇的標籤的文本顏色
容器	成分	看法	更改主要容器的組件類型
風格	風格	預設	更改或覆蓋主容器的樣式對象

未來計劃

• 執照
• 虛線標籤欄組件選項
• 動畫片
• 打字稿挑戰！
• 在媒介上寫一篇關於自由的文章

學分

由Sina Amiriyam啟發的設計

作者

freakycoder，[email protected]

執照

React Native Tab Bars可根據MIT許可證提供。有關更多信息，請參見許可證文件。