使用react native实现一个跨端的跑马灯轮播组件。
效果如图
例子
配置
type IProps = {
direction?: 'horizontal' | 'vertical';
delay?: number;
iterations?: number;
itemDurations?: number;
containerStyle?: ViewStyle;
onFinished?: () => void;
children: any;
type?: 'swipe' | 'normal';
swiperItemDurations?: number;
};
demo
import {Marquee} from 'react-native-marquee-easy'
<Marquee
itemDurations={2000}
containerStyle={styles.cStyle}
iterations={count}
onFinished={() => {
console.log("test finished ani");
}}
>
<View style={{ backgroundColor: "green" }}>
<Text style={styles.text}>aaaaa</Text>
</View>
<View style={styles.item}>
<Text style={styles.text}>bbbbbbb</Text>
</View>
<View style={{ backgroundColor: "pink" }}>
<Text style={styles.text}>cccccccccc</Text>
</View>
</Marquee>
功能
使用简单 纯js实现不依赖任何第三方库
支持水平垂直两个方向
支持文字&view
两种模式
- type=normal 连续不间断滚动
- type=swipe 停顿式轮播滚动
原理
4. 当滚动到最后一项时 再将动画重置为初始状态 因为第一项和最后一项相同 所以视图不会刷新 实现无限滚动。
代码仓库
github:react-native-marquee-easy