react-native实现一个简单的标签页组件（react-native-scroll-tab-page）

前言

react-native-scroll-tab-page是一个可滑动的标签页组件。源码react-native-scroll-tab-page

相信很多伙伴都有写过滑动标签页的功能，react-native官方没有提供这个组件。但是很多大佬都写开发了自己的滑动标签页组件。其中有react-native-scroll-tab等。相信很多伙伴都用过。因此，我也开发一个属于自己的标签页组件，具体实现查看源码

可以clone源码cd Example/运行Example查看运行的效果。下面介绍使用方法

小编福利推荐，更多精彩内容请点击链接，点击这里

提供的属性和方法介绍

ScrollTab

属性	说明	类型	默认值	必选
tabs	tab数据	Array<{title:''}>	-	true
page	当前选中的页面index	number	-	false
style	组件样式(没有高度的话内容显示不出来)	object	-	false
onTabClick	tab点击触发	(tab: Array<{title:''}>, index: number) => void	-	false
onChange	tab变化时触发	(tab: Array<{title:''}>, index: number) => void	-	false
renderTabBar	替换tab的tabBar	(tab: tabBarOptions) => React.ReactNode tabBarOptions见下面属性	-	false
tabBarTextStyle	tab的字体样式	object	-	false
tabBarActiveTextStyle	tab选中字体样式	object	-	false
tabBarUnderlineStyle	tab选中下划线的样式	object	-	false

方法	说明	参数
goToPage(index)	切换tab	跳转页面索引

ScrollTab .DefaultTabBar

属性	说明	类型	默认值	必选
tabs	tab数据	Array<{title:''}>	-	true
activeTab	当前选中的tab	number	-	true
tabItemWidth	tab每项的宽(自定义tabbar的时候，必须告诉你的组件每个显示的宽度)	number	-	true
goToTab	跳转tab	(index: number) => void	-	true
onTabClick	tab点击触发	(tab: Array<{title:''}>, index: number) => void	-	false
WIDTH	tab的宽	number	-	true

使用方法

npm install -S react-native-scroll-tab-page

下面是3种使用方法

import ScrollTab from 'react-native-scroll-tab-page'
class App extends React.Component {

  state = {
    tabs1:[{title:"tab1"},{title:"tab2"},{title:"tab3"},{title:"tab4"},{title:"tab5"},{title:"tab6"}],
    tabs2:[{title:"tab1"},{title:"tab2"},{title:"tab3"},{title:"tab4"},{title:"tab5"},{title:"tab6"},{title:"tab7"},{title:"tab8"}],
    page:2
  }

  renderPage1 = (item,index) => {
    return (
      
        {item.title}
        {
          index != 1 && {
            this.scrollTab.goToPage(1)
          }}>
            回到第1页
          
        }
      
    )
  }
  
  renderPage = (item,index) => {
    return (
      
        {item.title}
      
    )
  }

  renderTabBar = (tabBarOptions) =>{
    const { tabs , tabItemWidth ,activeTab , goToTab  } = tabBarOptions;
    return (
      
        {tabs.map((item,index)=>{
          let tabBarItemActiveStyle = {};
          if(activeTab == index){
            tabBarItemActiveStyle = {
              color:"red",
              fontSize:16,
              fontWeight:'bold'
            }
          }
          return(
            // width必须是tabItemWidth
            goToTab(item,index)}>
              {item.title}
            
          )
        })}
      
    )
  }
  render(){
    const { tabs1 , tabs2, page} = this.state;
    return (
      <>
        
        
          

            1、基本用法(数组长度超出5，tabBar自动滚动)
            
              
                tab1
              
              
                tab2
              
              
                tab3
              
              
                tab4
              
              
                tab5
              
              
                tab6
              
            

            2、基本用法(内容页面提供方法进行渲染)
            
              {this.renderPage}
            

            3、基本用法(自定义tabBar)
            this.scrollTab = ref}
                       style={{height:320}}
                       renderTabBar={(tabBarOptions)=>this.renderTabBar(tabBarOptions)}
                       page={page}
                       onChange={(item,index)=>this.setState({page:index})}
                       onTabClick={(item,index)=>console.log(index)}
            >
              {this.renderPage1}
            
          
        
      
    );
  }
}

const styles = StyleSheet.create({
  tabPageStyle:{
    marginVertical: 10,
    marginHorizontal:15,
    backgroundColor:"gray",
    flex:1,
    flexDirection:"row",
    justifyContent:'center',
    alignItems:'center'
  }
});

export default App;

运行效果图

QQ截图20200417144352.png

简单写了一个滑动标签页组件。有兴趣的同学可以看一下源码，完全使用class组件实现的

源代码：https://github.com/liuboshuo/react-native-scroll-tab-page
组件地址：https://www.npmjs.com/package/react-native-scroll-tab-page

谢谢！