好用的tabbar – react-native-smartbar

react-native-smartbar

好用的tabbar

Get Started

  • DEMO

  • 打开关闭bar

  • 仅图片

    只想显示图片那么不要在[text(TabBar.Item)]中填写

  • 仅文字

    如果只想显示文字不要在[image(TabBar.Item)] 中填写

文档

  • TabBar
    • attribute type required description example
      activeColor string false 活跃项颜色 activeColor={‘#FE985B’}
      toggleBar bool false 隐藏或者显示 toggleBar={this.state.toggle}
      height number false 默认值 = 45px height={50}
      index number false 跳转index和默认index index={this.state.index}
      style style false 页脚栏样式 style={{height: 500}}
      • TabBar.Item
      attribute type required description example
      icon image false 默认icon icon={require(‘./img/abc.png’)}
      selectedIcon image false 活跃项icon icon={require(‘./img/abc_2.png’)}
      text string false 默认文本 text={‘List’}
      style style false 活跃栏文本 style={{height: 500}}

      功能特色

      1. 显示或隐藏

        <TabBar
                   // ...
                    ref={tabbar=> this.tabbar=tabbar}
            >
        
            // toggle 
            this.tabbar.toggleBar()
        
            // OR set bool
            this.tabbar.toggleBar(true)
            this.tabbar.toggleBar(false)

        或者…

        <TabBar
                  // ...
                   toggleBar={this.state.toggle}
           >
        
           // toggle 
           componentWillReceiveProps (nextProps){
                this.setState({
                    toggle: nextProps.toggle
                })
           }
      2. 跳转

        <TabBar
                   // ...
                    ref={tabbar=> this.tabbar=tabbar}
            >
        
            // jump
            this.tabbar.jumpToIndex(index)

        或者…

        <TabBar
                  // ...
                   index={this.state.index}
           >
        
           // jump 
           componentWillReceiveProps (nextProps){
                this.setState({
                    index: nextProps.index
                })
           }
      3. 自定义

        你可以自定义任何样式!

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

      本站文章除注明转载外,均为本站原创或编译
      转载请明显位置注明出处:好用的tabbar – react-native-smartbar