? ??? ??react-native-scrollable-tab-view是一個(gè)非常好用的TabBar組件，支持滑動(dòng)，可以實(shí)現(xiàn)標(biāo)簽超過屏幕寬度的情況。但是有時(shí)會(huì)需要實(shí)現(xiàn)比如提示未讀個(gè)數(shù)、定制樣式這些需求，那么已有的功能就不能滿足需求了。現(xiàn)在實(shí)現(xiàn)一個(gè)類似下圖可標(biāo)記未讀及數(shù)量的自定義TabBar。原圖找不到了，就類似網(wǎng)易首頁頂部的tabbar，包括顯示數(shù)字。

基本用法git地址：https://github.com/brentvatne/react-native-scrollable-tab-view，一個(gè)簡單的例子： <ScrollableTabViewstyle={styles.container}locked={true}tabBarUnderlineStyle={styles.indicator}tabBarBackgroundColor='#fff' tabBarActiveTextColor="#485FF9"tabBarInactiveTextColor="#000000"tabBarTextStyle={styles.textSize}initialPage={0}renderTabBar={() => <DefaultTabBar />}><View style={{flex: 1}}><View style={{flex:1 ,width:'100%'}}><Text>界面1</Text></View> </View><View style={{flex: 1}}><View style={{flex:1 ,width:'100%'}}><Text>界面2</Text></View> </View><View style={{flex: 1}}><View style={{flex:1 ,width:'100%'}}><Text>界面3</Text></View></View><View style={{flex: 1}}><View style={{flex:1 ,width:'100%'}}><Text>界面4</Text></View> </View></ScrollableTabView>

? ??? ??屬性renderTabBar就是tabbar組件。官方默認(rèn)給了幾個(gè)樣式，如果實(shí)現(xiàn)自定義樣式，就自己寫一個(gè)組件然后賦值給它。

自定義TabBar樣式

propTypes: {goToPage: PropTypes.func,activeTab: PropTypes.number,tabs: PropTypes.array,backgroundColor: PropTypes.string,activeTextColor: PropTypes.string,inactiveTextColor: PropTypes.string,scrollOffset: PropTypes.number,style: ViewPropTypes.style,tabStyle: ViewPropTypes.style,tabsContainerStyle: ViewPropTypes.style,textStyle: Text.propTypes.style,renderTab: PropTypes.func,underlineStyle: ViewPropTypes.style,onScroll: PropTypes.func,}

? ??? ??ScrollableTabView的變量有上述這些，可以通過this.props.屬性名來使用。比如：this.props.activeTab,是當(dāng)前選擇的tab，那么我們就可以利用這個(gè)屬性來知道當(dāng)前選擇的是哪個(gè)tab。
? ??? ??另外：this.props.containerWidth是tabbar的長度，this.props.tabs.length是tabbar的標(biāo)簽個(gè)數(shù)。通過這兩個(gè)，可以實(shí)現(xiàn)底部那條選中哪個(gè)標(biāo)簽移動(dòng)到哪個(gè)標(biāo)簽下的底部線的樣式。
? ??? ??還有，底部線移動(dòng)的動(dòng)畫要怎么實(shí)現(xiàn)呢？在源碼里看到這段注釋：

// Animated.add and Animated.divide do not currently support listeners so// we have to polyfill it here since a lot of code depends on being able// to add a listener to `scrollValue`. See https://github.com/facebook/react-native/pull/12620.

也就是說ScrollableTabView通過scrollValue來實(shí)現(xiàn)了一個(gè)組合動(dòng)畫，就直接使用this.props.scrollValue來使用已經(jīng)實(shí)現(xiàn)的底部線的動(dòng)畫，可以通過動(dòng)畫的插值函數(shù)interpolate來實(shí)現(xiàn)我們想要的底部線的寬度，或?qū)崿F(xiàn)移動(dòng)時(shí)的伸縮效果，都可以通過這個(gè)來實(shí)現(xiàn)。

直接上自定義的tabbar

/*** @desc ScrollableTabView的自定義tabBar組件，賦值給renderTabBar* 屬性tabLabelNames，來記錄需要的屬性：showNum 是否顯示數(shù)字，num 數(shù)量，showIcon 是否只展示小圓點(diǎn)。* @author MaRui*/ import React from 'react'; import {StyleSheet,Text,View,TouchableOpacity,Animated, } from 'react-native';class CustomTabBar extends React.Component {constructor(props) {super(props);}render() {const containerWidth = this.props.containerWidth;const numberOfTabs = this.props.tabs.length;const tabUnderlineStyle = {position: 'absolute',width: containerWidth / numberOfTabs,height: 4,backgroundColor: 'navy',bottom: 0,justifyContent: 'center'};const translateX = this.props.scrollValue.interpolate({inputRange: [0, 1],outputRange: [0, containerWidth / numberOfTabs],});return <View style={[styles.tabs, this.props.style, {backgroundColor: this.props.backgroundColor,}]}>{this.props.tabLabelNames.map((tab, page) => {return <TouchableOpacity key={tab.name} onPress={() => this.props.goToPage(page)} style={styles.tab}><Textstyle={[styles.tabText, page === this.props.activeTab ? {color: this.props.activeTextColor} : {color: this.props.inactiveTextColor}, this.props.textStyle]}>{tab.name}</Text><Viewstyle={[(tab.showNum && tab.num !== 0) ? styles.tabNum : (tab.showIcon ? styles.tabDot : null),((tab.showNum && tab.num !== 0) || tab.showIcon) ? styles.show : styles.hide]}><Textstyle={styles.tabNumText}>{(tab.showNum && tab.num !== 0) ? (tab.num > 99 ? '99+' : tab.num) : null}</Text></View></TouchableOpacity>;})}<Animated.Viewstyle={[tabUnderlineStyle,{transform: [{translateX},]},this.props.underlineStyle,]}/></View>;}}const styles = StyleSheet.create({tab: {flexDirection: 'row',flex: 1,alignItems: 'center',justifyContent: 'center'},tabs: {height: 45,flexDirection: 'row',justifyContent: 'space-around'},tabText: {fontSize: 14},tabNum: {borderRadius: 10,backgroundColor: '#E72E2E',height: 20,minWidth: 20,paddingHorizontal: 2,marginLeft: 2,alignItems: 'center',justifyContent: 'center'},tabNumText: {color: 'white',fontSize: 10,textAlign: 'center',lineHeight: 20,minWidth: 20},tabDot: {borderRadius: 8,marginLeft: 2,height: 8,width: 8,backgroundColor: '#E72E2E'},show: {display: 'flex'},hide: {display: 'none'} });export default MineTabBar;

例子

<ScrollableTabViewstyle={styles.container}locked={true}tabBarUnderlineStyle={styles.indicator}tabBarBackgroundColor='#fff' tabBarActiveTextColor="#485FF9"tabBarInactiveTextColor="#000000"tabBarTextStyle={styles.textSize}initialPage={0}renderTabBar={() => <CustomTabBar tabLabelNames={[{name: '標(biāo)簽1', showNum: true, showIcon: false, num: this.state.num1},{name: '標(biāo)簽2', showNum: false, showIcon: this.props.hasUnread},{name: '標(biāo)簽3', showNum: false, showIcon: false},{name: '標(biāo)簽4', showNum: false, showIcon: false}]}/>}><View style={{flex: 1}}><View style={{flex:1 ,width:'100%'}}><Text>界面1</Text></View></View><View style={{flex: 1}}><View style={{flex:1 ,width:'100%'}}><Text>界面2</Text></View></View><View style={{flex: 1}}><View style={{flex:1 ,width:'100%'}}><Text>界面3</Text></View> </View><View style={{flex: 1}}><View style={{flex:1 ,width:'100%'}}><Text>界面4</Text></View> </View></ScrollableTabView>

總結(jié)

以上是生活随笔為你收集整理的React Native ScrollableTabView的自定义tabBar的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。