Реагировать на собственный ScrollView в положение по умолчанию

Question

У меня есть один рабочий стол с горизонтальной прокруткой, отображающей плоский список с элементами. У меня есть меню ящика с некоторыми категориями. Каждый раз, когда я нажимаю на категории меню, это просто выборка данных с сервера и затем рендеринг их на домашний экран.

Когда я загружаю домашний экран в первый раз, элементы прокрутки отображаются, как и ожидалось, начиная с первого элемента слева, затем второго элемента, 3-го и т. Д.

Если я прокручиваю его, скажем, к середине списка, а затем открываю Меню и извлекаю разные данные на тот же экран, scrollView не сбрасывается в исходное положение, он все еще остается в середине.

Мой вопрос заключается в том, как «сбросить» scrollView или flatlist к исходному (положение по умолчанию), поэтому, когда я выбираю новые данные, он должен отображать их, начиная с первого элемента слева, независимо от того, где он был раньше.

Я попробую сделать ссылку на FlatList

  ref={(ref) => { this.flatListRef = ref; }}

А затем в componentDidMount

this.flatListRef.scrollTo({ animated: false, index: 0 });

Но это не работает (

Answer 1

Попробуйте это:

class YourComponent extends Component {
  constructor(props) {
    super(props);

    this.flatListRef = React.createRef();
  }

  componentWillReceiveProps() {
    this.flatListRef.current.scrollTo({ animated: false, x: 0, y: 0 });
  }

  render() {
      return (
          <FlatList ref={this.flatListRef} contentContainerStyle={{ flex: 1 }}>
                ...
          </FlatList>
      );
  }
}