Как сделать автоматическую прокрутку FlatList?

Вот что я пытаюсь сделать: я использую функцию setInterval для установки переменной content, которая будет изменяться каждую секунду, и я нахожу, что onMomentumScrollEnd может получить позицию y при прокрутке FlatList

И тогда я застрял, я думал, что event.nativeEvent.contentOffset.y = this.state.content; может позволить моей FlatList автоматической прокрутке. Очевидно, что это не так.

Кто-нибудь может дать мне какое-нибудь предложение? Заранее спасибо.

Мои данные из API Вот мой App.js:

import React from 'react';
import { View, Image, FlatList, Dimensions } from 'react-native';

const { width, height } = Dimensions.get('window');
const equalWidth = (width / 2 );

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.renderRow = this.renderRow.bind(this);
    this.state = { movies: [], content: 0 };
  }

  componentWillMount() {
    fetch('https://obscure-reaches-65656.herokuapp.com/api?city=Taipei&theater=Centuryasia')
      .then(response => response.json())
      .then(responseData => {
        console.log(responseData);
        this.setState({ movies: responseData[0].movie });
      })
      .catch((error) => console.log(error));

      this.timer = setInterval(() => {
          this.setState({content: this.state.content+1 })
      }, 1000);
  }
  // get the jsonData key is item and set the value name is movie
  renderRow({ item: movie }) {
    console.log('renderRow => ');
    return (
      <View>
        <Image source={{ uri: movie.photoHref}} style={{ height: 220, width: equalWidth }} resizeMode="cover"/>
      </View>
    );
  }

  render() {
    const movies = this.state.movies;
    // it well be rendered every second from setInterval function setState
    console.log('render');
    return (
      <View style={{ flex: 1 }}>
        <FlatList
          data={movies}
          renderItem={this.renderRow}
          horizontal={false}
          keyExtractor={(item, index) => index}
          numColumns={2}
          onMomentumScrollEnd={(event) => {
            console.log(event.nativeEvent.contentOffset.y);
            event.nativeEvent.contentOffset.y = this.state.content;
          }}
        />
      </View>
    );
  }
}

person Morton    schedule 26.04.2018    source источник


Ответы (1)


Вам нужно сообщить FlatList, что вы хотите, чтобы он прокручивался до новой позиции, используя scrollToOffset().

Сохраните ссылку на свой FlatList в своем классе, добавив к нему реквизит ref={flatList => { this.flatList = flatList }}.

Затем вызовите this.flatList.scrollToOffset({ offset: yourNewOffset }), чтобы перейти к нужному смещению.

Документы по этому методу находятся здесь.

person Jordan Duncan    schedule 26.04.2018
comment
Спасибо за ваш ответ @Jordan, не могли бы вы показать мне, как вызвать this.flatList.scrollToOffset, я понятия не имею, как вызвать его в FlatList для автоматической прокрутки. Спасибо. - person Morton; 26.04.2018
comment
Вам просто нужно вызвать this.flatList.scrollToOffset({ offset: yourNewOffset }) внутри вашего setInterval, заменив yourNewOffset тем количеством пикселей, до которого вы хотите прокрутить. - person Jordan Duncan; 26.04.2018