React native

ScrollableTabView Custom TabBar

ScrollableTabView TabBar with indicator

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

introduce

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}>
                <Image
                    source={image} style={styles.image}/>
                <Text style={textStyle} allowFontScaling={false}>
                    {tab.text}
                </Text>
            </View>)}Copy the code

Item indicates the contents of each page card

Introduce layout into the file

<View style={styles.container}>

        tabs.map((tab, i) => {
               return (
                   <TouchableOpacity
                       activeOpacity={1}
                       style={{flex: 1}}
                       key={i}
                       onPress={() => {

                           this.props.goToPage(i)
                       }}>
                       {this.renderItem(tab, i, this.props.activeTab)}
                   </TouchableOpacity>
               )
           })
       }
 </View>
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: [
                        {translateX}
                    ]
                }}>
                    <View style={{
                        alignSelf: 'center',
                        height: ScreenUtil.px2dpY(4),
                        backgroundColor: COLOR_BLUE.width: indicatorLength / 2}} / >
</Animated.View>
Copy the code

The complete effect is shown in the figure below.