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 codeHere 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 codeRunning 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!
