Отримайте поточну позицію прокрутки 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, повністю недокументований. Оскільки тут все покладається на незадокументовану поведінку, я, на жаль, не обіцяю, що ця інформація залишатиметься правильною через рік чи навіть місяць.

Крім того , всі , що нижче передбачає чисто вертикальний Scrollview якого у компенсовано нас цікавить; перекладаємо на 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слухача спричинить проблеми з продуктивністю. В даний час найефективнішим способом просто отримати поточну позицію прокрутки є використання пакета react-native-invoke . Для цієї точної речі є приклад, але пакет робить багато інших речей.

Про це читайте тут. https://medium.com/@talkol/invoke-any-native-api-direct-from-pure-javascript-in-react-native-1fb6afcdf57d#.68ls1sopd

Щоб отримати х / у після закінчення прокрутки, як запитували оригінальні запитання, найпростіший спосіб, мабуть, такий:

<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/isissue/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

Щодо сторінки, я працюю над компонентом вищого порядку, який використовує в основному вищезазначені методи, щоб зробити саме це. Насправді потрібно трохи часу, коли ви переходите до тонкощів, таких як початковий макет і зміст вмісту. Я не буду стверджувати, що зробив це "правильно", але в деякому сенсі я вважав би правильною відповіддю використовувати компонент, який робить це ретельно і послідовно.

Див.: Реакція-натискання-прокрутка-перегляд-перегляд . Буду любити відгук, навіть якщо це все, що я все зробив неправильно!

я вірю contentOffset , що ви отримаєте об'єкт, що містить верхнє ліве зміщення прокрутки:

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