React native

ScrollableTabView Custom TabBar

ScrollableTabView TabBar with indicator

Using the react – native – scrollable – TAB – the viewThe official addressImplement Tab switching.


A control with TabBar and swappable pages. In Android, it can be viewed as a combination of ViewPager and TabLayout.

Add to the project

  • Use NPM install
npm install react-native-scrollable-tab-view --save
Copy the code
  • Import from package
react-native-scrollable-tab-view":"^ 0.10.0"
Copy the code

The basic use

Use tabLabel to specify the Tab name

 render() {
       returnRenderTabBar ={() => <DefaultTabBar/>}> <Text tabLabel='Tab1'/> <Text tabLabel='Tab2'/> <Text tabLabel='Tab3'/> <Text tabLabel='Tab4'/> <Text tabLabel='Tab5'/> <Text tabLabel='Tab6'/> </ScrollableTabView> ); }}Copy the code

The effect is as follows:

The custom TAB

Create a New HomeBarComponent and create an Item

 renderItem = (tab, i, page) = > {
        const image = i === page ? tab.activeIcon : tab.icon;
        const textStyle = {
            fontSize: 10.color: COLOR_GRAY,
            lineHeight: 14.marginTop: 4,}if (i === page) {
            textStyle.color = COLOR_BLUE;
        return (
            <View style={styles.item}>
                    source={image} style={styles.image}/>
                <Text style={textStyle} allowFontScaling={false}>
            </View>)}Copy the code

Item indicates the contents of each page card

Introduce layout into the file

<View style={styles.container}>, i) => {
               return (
                       style={{flex: 1}}
                       onPress={() => {

                       {this.renderItem(tab, i, this.props.activeTab)}
Copy the code

Then in ScrollableTabView set:

renderTabBar={() => <HomeBarComponent/>}

Copy the code

Add indicator

Setting indicator

Set the width

const indicatorLength =
ScreenUtil.screenWidth / tabs.length
Copy the code

Where tabs is the width of each indicator

Translation of animation

 const translateX = this.props.scrollValue.interpolate({
            inputRange: [0.1].outputRange: [0, ScreenUtil.screenWidth / tabs.length],
Copy the code

Import into the view

<Animated.View style={{
                    marginBottom: ScreenUtil.px2dpY(10),
                    height: ScreenUtil.px2dpY(4),
                    width: indicatorLength,
                    transform: [
                    <View style={{
                        alignSelf: 'center',
                        height: ScreenUtil.px2dpY(4),
                        backgroundColor: COLOR_BLUE.width: indicatorLength / 2}} / >
Copy the code

The complete effect is shown in the figure below.