Как сделать FlatList с автоматической прокруткой? - PullRequest
Новая
       1

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

0 голосов
/ 26 апреля 2018

Вот то, что я пытаюсь использовать функцию 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>
    );
  }
}

1 Ответ

0 голосов
/ 26 апреля 2018

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

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

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

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

...