小编Spl*_*iid的帖子

如何使用 Animated 使列表 (FlatList) 自动滚动元素?

我有一个水平的 FlatList,每次到达末尾时,它都会自动将新元素添加到列表中,因此它有点像一个无限列表。我希望应用程序自己自动滚动列表,而用户仍然必须能够来回滚动。这就是我要走的路

export default class ImageCarousel extends Component {
  constructor(props) {
    super(props);

    this.scrollX = 0;
    this.offset = new Animated.Value(0);
    this.scrollTo = this.scrollTo.bind(this);
    this.handleScroll = this.handleScroll.bind(this);
    this.stopAnimation = this.stopAnimation.bind(this);
    // Listener to call the scrollToOffset function
    this.offset.addListener(this.scrollTo);
  }

  _scroller() {
    toValue = this.scrollX + 10; // Scroll 10 pixels in each loop
    this.animation = Animated.timing(
      this.offset,
      {
        toValue: toValue,
        duration: 1000, // A loop takes a second
        easing: Easing.linear,
      }
    );
    this.animation.start(() => this._scroller()); //Repeats itself when done
  }

  scrollTo(e) { …
Run Code Online (Sandbox Code Playgroud)

reactjs react-native react-native-flatlist

2
推荐指数
2
解决办法
2万
查看次数