ScrollableTabView自定义TabBar

React native

ScrollableTabView自定义TabBar

ScrollableTabView带指示器的TabBar

利用react-native-scrollable-tab-view官方地址实现Tab切换。

介绍

一个带有TabBar和可切换页面的控件。
在Android中可以看成是ViewPager和TabLayout的结合。

添加到项目中

• 方法一、使用npm install

npm install react-native-scrollable-tab-view --save

• 方法二、package里导入

react-native-scrollable-tab-view": "^0.10.0"

基本使用

用tabLabel指定Tab名称

 render() {
       return (
           <ScrollableTabView
                tabBarPosition={'top'}//tabBar的位置
                renderTabBar={() => <DefaultTabBar/>}>
                <Text tabLabel='Tab1'/>
                <Text tabLabel='Tab2'/>
                <Text tabLabel='Tab3'/>
                <Text tabLabel='Tab4'/>
                <Text tabLabel='Tab5'/>
                <Text tabLabel='Tab6'/>
            </ScrollableTabView>
        );
    }
}

效果如图：

自定义tab

新建HomeBarComponent并创建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>
        )
    }

Item为每个页卡的指示内容

在文件内引入布局

<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>

之后在ScrollableTabView中设置：

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

添加指示器

设置指示器

设置宽度

const indicatorLength =
ScreenUtil.screenWidth / tabs.length

其中tabs为每个指示器的宽度

平移动画

 const translateX = this.props.scrollValue.interpolate({
            inputRange: [0, 1],
            outputRange: [0, ScreenUtil.screenWidth / tabs.length],
        });

引入到视图中

<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>

完整效果如图