Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
171 lines (104 sloc) 4 KB

react-native-smartbar

可能是最好的tabbar。English

下载

* 从npm库下载
sudo npm i react-native-smartbar --save

开始

  • 效果展示

    Witt Bulter

  • 显示/隐藏

    Witt Bulter

  • 只显示图片

    如果你希望只显示图片, 忽略此项属性即可: [text(TabBar.Item)] Witt Bulter

  • 只显示文字

    如果你希望只显示文字, 忽略此项属性即可: [image(TabBar.Item)] Witt Bulter

文档

  • TabBar(底部bar)
属性 类型 必须 描述 例子
activeColor string 激活颜色 activeColor={'#FE985B'}
toggleBar bool 显示与隐藏 toggleBar={this.state.toggle}
height number 高度,默认高度45px height={50}
index number 跳转至指定路由 index={this.state.index}
style style 自定义样式 style={{height: 500}}
  • TabBar.Item(底部bar的每一个子项)
属性 类型 必须 描述 例子
icon image 默认图标(图片) icon={require('./img/abc.png')}
selectedIcon image 激活时图标(图片) icon={require('./img/abc_2.png')}
text string 默认文字 text={'List'}
style style 自定义样式 style={{height: 500}}

特点

  1. 简单敏捷的控制显示/隐藏

        <TabBar
               // ...
                ref={tabbar=> this.tabbar=tabbar}
        >
    
        // 你可以将 [this.tabbar] 传入至下个页面,参考react通信方式
        // 函数控制
        this.tabbar.toggleBar()
     
        // 或是设置一个布尔值
        this.tabbar.toggleBar(true)
        this.tabbar.toggleBar(false)

    或者使用属性的方式:

       <TabBar
              // ...
               toggleBar={this.state.toggle}
       >
    
       // 使用redux的方式
       // toggle 
       componentWillReceiveProps (nextProps){
       		this.setState({
       			toggle: nextProps.toggle
       		})
       }
        
  2. 标准的指定路由跳转方式:

        <TabBar
               // ...
                ref={tabbar=> this.tabbar=tabbar}
        >
     
        // 使用句柄的函数跳转
        this.tabbar.jumpToIndex(index)
     

    或者通过设置属性的方式跳转:

       <TabBar
              // ...
               index={this.state.index}
       >
    
       // jump 
       componentWillReceiveProps (nextProps){
            this.setState({
                index: nextProps.index
            })
       }
        
  3. 可扩展的样式:

    你可以为tabbar自定义任何样式:

       <TabBar
              // ...
               style={{...}}
       >
           <TabBar.Item
               // ...
               style={{...}}
            >
               <Index />
            </TabBar.Item>    
       </TabBar>
        

使用例子

参见 /example

支持

  • MAIL (# = @) => nanazuimeng123#gmail.com
  • ISSUES
You can’t perform that action at this time.