Получить текущую позицию прокрутки ScrollView в React Native

Можно ли получить текущую позицию прокрутки или текущую страницу <ScrollView>компонента в React Native?

Так что-то вроде:

<ScrollView
  horizontal={true}
  pagingEnabled={true}
  onScrollAnimationEnd={() => { 
      // get this scrollview's current page or x/y scroll position
  }}>
  this.state.data.map(function(e, i) { 
      <ImageCt key={i}></ImageCt> 
  })
</ScrollView>

Пытаться.

<ScrollView onScroll={this.handleScroll} />

А потом:

handleScroll: function(event: Object) {
 console.log(event.nativeEvent.contentOffset.y);
},

Отказ от ответственности: все, что следует ниже, в первую очередь является результатом моих собственных экспериментов с React Native 0.50. В ScrollViewдокументации в настоящее время отсутствует большая часть информации, описанной ниже; например onScrollEndDrag, полностью недокументировано. Поскольку все здесь основано на недокументированном поведении, я, к сожалению, не могу обещать, что эта информация останется верной через год или даже через месяц.

Кроме того, все, что ниже, предполагает чисто вертикальную прокрутку, чье смещение по y нас интересует; перевод в x смещения, если необходимо, будет легким упражнением для читателя.

Различные обработчики событий на ScrollViewБерут eventи позволяют получить текущую позицию прокрутки с помощью event.nativeEvent.contentOffset.y. Некоторые из этих обработчиков немного различаются между Android и iOS, как описано ниже.

onScroll

На Android

Запускает каждый кадр, пока пользователь прокручивает, на каждом кадре, когда представление прокрутки скользит после того, как пользователь отпускает его, на последнем кадре, когда представление прокрутки останавливается, а также всякий раз, когда смещение представления прокрутки изменяется в результате его кадра изменение (например, из-за поворота с пейзажа на портрет).

На iOS

Срабатывает, когда пользователь перетаскивает или скользит вид прокрутки, с некоторой частотой, определяемой scrollEventThrottleи не более одного раза за кадр, когда scrollEventThrottle={16}. Если пользователь отпускает режим прокрутки, пока у него достаточно импульса для скольжения, onScrollобработчик также сработает, когда он остановится после скольжения. Однако, если пользователь перетаскивает , а затем отпускает вид прокрутки , пока она находится в неподвижном состоянии , onScrollэто не гарантирует огня для конечной позиции , если scrollEventThrottleне было установлено , что такие onScrollпожары каждый кадр прокрутки.

Установка scrollEventThrottle={16}требует снижения производительности, которую можно уменьшить, задав большее значение. Однако это означает, что onScrollне будет запускаться каждый кадр.

onMomentumScrollEnd

Срабатывает, когда режим прокрутки останавливается после скольжения. Не срабатывает вообще, если пользователь отпускает прокрутку, когда она неподвижна и не скользит.

onScrollEndDrag

Срабатывает, когда пользователь перестает перетаскивать вид прокрутки - независимо от того, остается ли вид прокрутки неподвижным или начинает скользить.

Учитывая эти различия в поведении, лучший способ отслеживать смещение зависит от конкретных обстоятельств. В самом сложном случае (вам необходимо поддерживать Android и iOS, в том числе обрабатывать изменения в ScrollViewкадре из-за вращения, и вы не хотите соглашаться с потерей производительности на Android при установке scrollEventThrottleна 16), и вам нужно обработать тоже меняет содержимое в режиме прокрутки, то это чертовски беспорядок.

Самый простой случай - если вам нужно работать только с Android; просто используйте onScroll:

<ScrollView
  onScroll={event => { 
    this.yOffset = event.nativeEvent.contentOffset.y
  }}
>

Для дополнительной поддержки iOS, если вы счастливы запускать onScrollобработчик каждого кадра и принимать последствия этого для производительности, и если вам не нужно обрабатывать изменения кадра, тогда это только немного сложнее:

<ScrollView
  onScroll={event => { 
    this.yOffset = event.nativeEvent.contentOffset.y
  }}
  scrollEventThrottle={16}
>

Чтобы уменьшить накладные расходы на производительность на iOS, при этом гарантируя, что мы записываем любую позицию, на которой устанавливается представление прокрутки, мы можем увеличить scrollEventThrottleи дополнительно предоставить onScrollEndDragобработчик:

<ScrollView
  onScroll={event => { 
    this.yOffset = event.nativeEvent.contentOffset.y
  }}
  onScrollEndDrag={event => { 
    this.yOffset = event.nativeEvent.contentOffset.y
  }}
  scrollEventThrottle={160}
>

Но если мы хотим обрабатывать изменения кадра (например, потому что мы позволяем вращать устройство, изменяя доступную высоту для кадра просмотра прокрутки) и / или изменения содержимого, то мы должны дополнительно реализовать оба onContentSizeChangeи onLayoutотслеживать высоту обоих фрейм представления прокрутки и его содержимое, и, таким образом, непрерывно вычислять максимально возможное смещение и делать вывод о том, когда смещение было автоматически уменьшено из-за изменения фрейма или размера содержимого:

<ScrollView
  onLayout={event => {
    this.frameHeight = event.nativeEvent.layout.height;
    const maxOffset = this.contentHeight - this.frameHeight;
    if (maxOffset < this.yOffset) {
      this.yOffset = maxOffset;
    }
  }}
  onContentSizeChange={(contentWidth, contentHeight) => {
    this.contentHeight = contentHeight;
    const maxOffset = this.contentHeight - this.frameHeight;
    if (maxOffset < this.yOffset) {
      this.yOffset = maxOffset;
    }
  }}
  onScroll={event => { 
    this.yOffset = event.nativeEvent.contentOffset.y;
  }}
  onScrollEndDrag={event => { 
    this.yOffset = event.nativeEvent.contentOffset.y;
  }}
  scrollEventThrottle={160}
>

Да, это довольно ужасно. Я также не уверен на 100%, что он всегда будет работать правильно в тех случаях, когда вы одновременно изменяете размер как рамки, так и содержимого представления прокрутки. Но это лучшее, что я могу придумать, и пока эта функция не будет добавлена ​​в сам фреймворк , я думаю, что это лучшее, что может сделать каждый.

Ответ Брэда Ойлера правильный. Но вы получите только одно событие. Если вам нужно получать постоянные обновления позиции прокрутки, вы должны установить scrollEventThrottleопору, например:

<ScrollView onScroll={this.handleScroll} scrollEventThrottle={16} >
  <Text>
    Be like water my friend …
  </Text>
</ScrollView>

И обработчик событий:

handleScroll: function(event: Object) {
  console.log(event.nativeEvent.contentOffset.y);
},

Имейте в виду, что вы можете столкнуться с проблемами производительности. Отрегулируйте дроссельную заслонку соответствующим образом. 16 дает вам больше всего обновлений. 0 только один.

Если вы хотите просто получить текущую позицию (например, при нажатии какой-либо кнопки), а не отслеживать ее всякий раз, когда пользователь прокручивает, то вызов onScrollслушателя вызовет проблемы с производительностью. В настоящее время наиболее эффективный способ просто получить текущую позицию прокрутки - использовать пакет response-native-invoke . Есть пример именно этой вещи, но пакет выполняет еще несколько вещей.

Об этом читайте здесь. https://medium.com/@talkol/invoke-any-native-api-directly-from-pure-javascript-in-react-native-1fb6afcdf57d#.68ls1sopd

Чтобы получить x / y после завершения прокрутки, как запрашивали исходные вопросы, возможно, самый простой способ:

<ScrollView
   horizontal={true}
   pagingEnabled={true}
   onMomentumScrollEnd={(event) => { 
      // scroll animation ended
      console.log(e.nativeEvent.contentOffset.x);
      console.log(e.nativeEvent.contentOffset.y);
   }}>
   ...content
</ScrollView>

Приведенные выше ответы рассказывают, как получить позицию, используя другой API onScrollи onMomentumScrollEndт. Д .; Если вы хотите узнать индекс страницы, вы можете рассчитать его, используя значение смещения.

 <ScrollView 
    pagingEnabled={true}
    onMomentumScrollEnd={this._onMomentumScrollEnd}>
    {pages}
 </ScrollView> 

  _onMomentumScrollEnd = ({ nativeEvent }: any) => {
   // the current offset, {x: number, y: number} 
   const position = nativeEvent.contentOffset; 
   // page index 
   const index = Math.round(nativeEvent.contentOffset.x / PAGE_WIDTH);

   if (index !== this.state.currentIndex) {
     // onPageDidChanged
   }
 };

В iOS отношения между ScrollView и видимой областью следующие:

ссылка: https://www.objc.io/issues/3-views/scroll-view/

Вот как закончилось получение текущей позиции прокрутки в реальном времени из представления. Все, что я делаю, это использую прослушиватель событий при прокрутке и scrollEventThrottle. Затем я передаю его как событие для обработки созданной мной функции прокрутки и обновления моих реквизитов.

 export default class Anim extends React.Component {
          constructor(props) {
             super(props);
             this.state = {
               yPos: 0,
             };
           }

        handleScroll(event){
            this.setState({
              yPos : event.nativeEvent.contentOffset.y,
            })
        }

        render() {
            return (
          <ScrollView onScroll={this.handleScroll.bind(this)} scrollEventThrottle={16} />
    )
    }
    }

использование onScroll входит в бесконечный цикл. Вместо этого можно использовать onMomentumScrollEnd или onScrollEndDrag

Что касается страницы, я работаю над компонентом более высокого порядка, который использует в основном вышеуказанные методы для выполнения именно этого. На самом деле это займет совсем немного времени, если вы перейдете к таким тонкостям, как первоначальный макет и изменение содержимого. Я не буду утверждать, что сделал это «правильно», но в некотором смысле я бы посчитал правильным ответом использовать компонент, который делает это осторожно и последовательно.

Смотрите: response-native-paged-scroll-view . Хотел бы получить обратную связь, даже если я все сделал неправильно!

Я считаю, contentOffsetчто даст вам объект, содержащий смещение прокрутки вверху слева:

http://facebook.github.io/react-native/docs/scrollview.html#contentoffset