0

import React, { Component } from 'react';
import { Alert, AppRegistry, FlatList, Text, TextInput, View } from 'react-native';

export default class PizzaTranslator extends Component {
  constructor(props) {
    super(props);
    this.state = {text: ''};
  }
  _onload() {
    this.abc.scrollTo({x: 0, y: 0, animated: true});
  }

  render() {
    return (
      <View>
        <FlatList
          data={[
            {key: 'Devin'},
            {key: 'Jackson'},
            {key: 'James'},
            {key: 'Joel'},
            {key: 'John'},
            {key: 'Jillian'},
            {key: 'Jimmy'},
            {key: 'Julie'},
            {key: 'Devin'},
            {key: 'Jackson'},
            {key: 'James'},
            {key: 'Joel'},
            {key: 'John'},
          ]}
          renderItem={({item}) => <Text>{item.key}</Text>}
          onScrollBeginDrag={this._onload}
          ref={(FlatList) => {this.abc = FlatList;}}
        />
      </View>
    );
  }
}

// skip this line if using Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => PizzaTranslator);
http://facebook.github.io/react-native/docs/scrollview.html#scrolltoend

Как мне использовать метод scrollTo? как это вообще работает?

1 ответ 1

2

Не совсем понятен ваш пример. Как следует из документации, для реализации контейнера со скроллируемым контентом в react-native есть два компонента - ScrollView и FlatList. Первый отрисовывает сразу всех потомков (что кстати очень негативно сказывается на производительности), второй же делает это "лениво", отрисовывая только тех, что находятся в области видимости.

Относительно методов, ScrollView имеет только ScrollTo, который принимает одним из аргументов координаты куда скроллировать, и ScrollToEnd, который, как следует из названия, скроллит до конца. FlatList будет побогаче, он имеет четыре метода, о назначении которых не сложно догадаться из названия: scrollToEnd, scrollToIndex, scrollToItem, scrollToOffset.

scrollToIndex заставляет контейнер проскроллить содержимое до определенного индекса по порядку. scrollToItem заставляет контейнер проскроллить содержимое до определенного индекса по значению. Последний является более "тяжелым", документация рекомендует использовать скролл по индексу.

Рабочий пример c FlatList и scrollToEnd, scrollToIndex, scrollToItem : https://snack.expo.io/H1bFiiJcf

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.