React-native-scrollable-tab-view 自定义tabbar,实现下划线伸缩效果

React-native-scrollable-tab-view 是rn 开发里比较方便的tab切换插件。

先上效果图吧。github地址 :https://github.com/JunIce/react-native-scroll-customTabBar

 

实现的效果

运行过官方demo的同学都知道,原来的demo是下面的横线平分整个盒模型, 如下图。

官方demo

可是现实需求不一定是要等分的,类似于微博会有这种下边框带动效的tab。

分析我们的需求,下边线由原来的等分变成居中,所以原来的自适应填充就不能使用了,需要我们来定义下边线的长度,

this.props.tabUnderlineDefaultWidth ? this.props.tabUnderlineDefaultWidth : containerWidth / (numberOfTabs * 2);

为了达到预期的效果,我这里设置的如果不填写默认宽度,就默认设置原来tab的一半。

居中效果用绝对定位, 配和计算left值达到居中效果

接下来就是滑动过程中下边框变长,如果说要js滑动过程计算,那计算很复杂,所以才用来scaleX这中方式进行变化,达到变长的目的。

const translateX = this.props.scrollValue.interpolate({

                 inputRange: [0, 1],

                outputRange: [0, containerWidth / numberOfTabs],

});

 

我们看原来源码里的动画函数,就是scrollValue会传过来一个动画对象,0即是开始状态,1是结束状态,结束时移动一个tab的宽度,inputRange 和 outputRange 数组里的元素是一一对应的,inputRange数组元素是数字,必须从小到大

我们要实现的动画是在0到1的中间变长, 即0.5时应该是最大的

const scaleValue = (defaultScale) => {

            let number = 4

            let arr = new Array(number * 2)

            return arr.fill(0).reduce(function(pre, cur, idx){

                idx == 0 ? pre.inputRange.push(cur) : pre.inputRange.push(pre.inputRange[idx-1] + 0.5);

                idx%2 ? pre.outputRange.push(defaultScale) : pre.outputRange.push(1)

                return pre

                }, {inputRange: [], outputRange: []})

        }

通过reduce函数生成一个对象,最后的结果是 codepen

 

这样把生成的scaleX的值传到translate里面,即可生成动效

源码地址:https://github.com/JunIce/react-native-scroll-customTabBar, 希望大家给个star, 这年头多要点工资就看star了

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
React Native中可以使用第三方库`react-native-scrollable-tab-view`来实现滑动标题栏。以下是一个简单的示例代码: ```tsx import * as React from 'react'; import { StyleSheet, Text, View } from 'react-native'; import ScrollableTabView, { DefaultTabBar } from 'react-native-scrollable-tab-view'; type Props = {}; const FirstTabScreen = () => { return ( <View style={styles.container}> <Text>First Tab</Text> </View> ); }; const SecondTabScreen = () => { return ( <View style={styles.container}> <Text>Second Tab</Text> </View> ); }; const ScrollableTabNavigator = (props: Props) => { return ( <ScrollableTabView renderTabBar={() => <DefaultTabBar />} tabBarUnderlineStyle={styles.tabBarUnderline} tabBarBackgroundColor="#FFFFFF" tabBarActiveTextColor="#000000" tabBarInactiveTextColor="#999999" > <FirstTabScreen tabLabel="Tab 1" /> <SecondTabScreen tabLabel="Tab 2" /> </ScrollableTabView> ); }; export default ScrollableTabNavigator; const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', }, tabBarUnderline: { backgroundColor: '#000000', height: 2, }, }); ``` 在这个示例中,我们首先导入了`react-native-scrollable-tab-view`库中的`ScrollableTabView`和`DefaultTabBar`组件。然后,我们创建了两个Tab项组件`FirstTabScreen`和`SecondTabScreen`,每个组件中都有一个`tabLabel`属性,用于设置Tab的标签。最后,我们使用`ScrollableTabView`组件来包含Tab项,并设置了一些Tab导航的样式属性,例如`tabBarUnderlineStyle`、`tabBarBackgroundColor`、`tabBarActiveTextColor`和`tabBarInactiveTextColor`。在`renderTabBar`属性中,我们使用了`DefaultTabBar`组件来渲染Tab导航栏。 注意:`react-native-scrollable-tab-view`库已经很久没有更新了,建议使用`react-native-tab-view`等其他替代库。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值