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许可证提供。有关更多信息，请参见许可证文件。