preface

React-native Scroll -tab-page is a slider TAB component. Source the react – native – scroll – TAB page

Many of you have written sliding-tab functionality, but React-Native doesn’t offer this feature. But many big names have written and developed their own sliding TAB components. React-native Scroll TAB and so on. I believe many partners have used. Therefore, I also developed a TAB page component of their own, the specific implementation of view source code

Clone source CD Example/ run Example to see the result. The following describes how to use it

Provides an introduction to properties and methods

ScrollTab

attribute instructions type The default value Will choose
tabs TAB data Array<{title:”}> – true
page Index of the currently selected page number – false
style Component style (content will not display without height) object – false
onTabClick TAB click trigger (tab: Array<{title:”}>, index: number) => void – false
onChange Triggered when TAB changes (tab: Array<{title:”}>, index: number) => void – false
renderTabBar Replace the tabBar of a TAB (TAB: tabBarOptions) => react. ReactNode tabBarOptions see the following properties – false
tabBarTextStyle TAB font style object – false
tabBarActiveTextStyle TAB selects the font style object – false
tabBarUnderlineStyle TAB selects the underline style object – false
methods instructions parameter
goToPage(index) Switch the TAB Jump page index

ScrollTab .DefaultTabBar

attribute instructions type The default value Will choose
tabs TAB data Array<{title:”}> – true
activeTab The currently selected TAB number – true
tabItemWidth The width of each TAB item (when you customize a tabbar, you must tell your component the width of each display) number – true
goToTab Jump TAB (index: number) => void – true
onTabClick TAB click trigger (tab: Array<{title:”}>, index: number) => void – false
WIDTH TAB of the wide number – true

Method of use

npm install -S react-native-scroll-tab-page
Copy the code

Here are three ways to use it

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 ( <View style={{flex:1,margin:5, padding: 3, backgroundColor:"orange"}}> <Text>{item.title}</Text> { index ! = 1 && <TouchableOpacity onPress={()=>{this.scrolltab.gotopage (1)}}> <Text> ) } renderPage = (item,index) => { return ( <View style={styles.tabPageStyle}> <Text>{item.title}</Text> </View> ) } renderTabBar = (tabBarOptions) =>{ const { tabs , tabItemWidth ,activeTab , goToTab } = tabBarOptions; return ( <View style={{flexDirection:"row",backgroundColor:'purple'}}> {tabs.map((item,index)=>{ let tabBarItemActiveStyle = {}; if(activeTab == index){ tabBarItemActiveStyle = { color:"red", fontSize:16, } return(// width must be tabItemWidth <TouchableOpacity key={index}) style={{width:tabItemWidth,alignItems:"center",justifyContent:"center"}} onPress={()=>goToTab(item,index)}> <Text style={{... {color:'#333'},... tabBarItemActiveStyle}}>{item.title}</Text> </TouchableOpacity> ) })} </View> ) } render(){ const { tabs1 , tabs2, page} = this.state; Return (<> <StatusBar barStyle="dark-content" /> <SafeAreaView style={{flex:1}}> <ScrollView> <Text> </Text> <ScrollTab tabs={tabs1} style={{height:120}}> <View style={styles.tabPageStyle}> <Text>tab1</Text> </View> <View style={styles.tabPageStyle}> <Text>tab2</Text> </View> <View style={styles.tabPageStyle}> <Text>tab3</Text> </View> <View style={styles.tabPageStyle}> <Text>tab4</Text> </View> <View style={styles.tabPageStyle}> <Text>tab5</Text> </View> <View style={styles.tabPageStyle}> <Text>tab6</Text> </View> </ScrollTab> </ScrollTab tabs={tabs2} style={{height:120}}> {this.renderPage} </ScrollTab> </Text> <ScrollTab tabs={tabs2} ref={ref=>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} </ScrollTab> </ScrollView> </SafeAreaView> </> ); } } const styles = StyleSheet.create({ tabPageStyle:{ marginVertical: 10, marginHorizontal:15, backgroundColor:"gray", flex:1, flexDirection:"row", justifyContent:'center', alignItems:'center' } }); export default App;Copy the code

Running effect drawing

Simply write a sliding TAB page component. Interested students can take a look at the source code, the full use of class components to achieve

Source code: github.com/liuboshuo/r…

Component address: www.npmjs.com/package/rea…

Thank you very much!

If you often order take-out small friends, xiaobian to recommend a benefit. You can get a large takeaway red envelope for free every day, get it every day, no longer need to open a membership, save a breakfast every day.Click for detailsThe attached small program code is shown below: