使用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 两种模式

1. type=normal 连续不间断滚动
2. type=swipe 停顿式轮播滚动

原理

1. 加入输入的内容是【item1, item2, item3】
2. 首先会在最后一个item后面 再添加一个重复的item1视图变为【item1,item2,item3,item1】
3. 一次如图滚动

4. 当滚动到最后一项时 再将动画重置为初始状态 因为第一项和最后一项相同 所以视图不会刷新 实现无限滚动。

代码仓库

github:react-native-marquee-easy

npm：react-native-marquee-easy