webentwicklung-frage-antwort-db.com.de

Erkennen, dass ScrollView das Ende erreicht hat

Ich habe eine Text mit langem Text in einer ScrollView und möchte feststellen, wenn der Benutzer bis zum Ende des Textes geblättert hat, damit ich eine Schaltfläche aktivieren kann.

Ich habe das Ereignisobjekt vom Ereignis onScroll aus debuggen, aber es scheint keinen Wert zu geben, den ich verwenden kann.

18
Eldelshell

Ich habe es so gemacht:

import React from 'react';
import {ScrollView, Text} from 'react-native';

const isCloseToBottom = ({layoutMeasurement, contentOffset, contentSize}) => {
  const paddingToBottom = 20;
  return layoutMeasurement.height + contentOffset.y >=
    contentSize.height - paddingToBottom;
};

const MyCoolScrollViewComponent = ({enableSomeButton}) => (
  <ScrollView
    onScroll={({nativeEvent}) => {
      if (isCloseToBottom(nativeEvent)) {
        enableSomeButton();
      }
    }}
    scrollEventThrottle={400}
  >
    <Text>Here is very long lorem ipsum or something...</Text>
  </ScrollView>
);

export default MyCoolScrollViewComponent;

Ich wollte paddingToBottom hinzufügen, da es in der Regel nicht erforderlich ist, dass ScrollView bis zum letzten Pixel nach unten gescrollt wird. Wenn Sie möchten, dass paddingToBottom auf null gesetzt wird.

49
Henrik R
<... onScroll={(e) => {
        let paddingToBottom = 10;
        paddingToBottom += e.nativeEvent.layoutMeasurement.height;
        if(e.nativeEvent.contentOffset.y >= e.nativeEvent.contentSize.height - paddingToBottom) {
          // make something...
        }
      }}>...

wie dieses reagieren-native 0.44

10

Eine andere Lösung wäre, eine ListView mit einer einzelnen Zeile (Ihrem Text) zu verwenden, die die onEndReached-Methode hat. Siehe die Dokumentation hier

4
David

Für horizontale ScrollView (z. B. Karussells) ersetzen Sie die Funktion isCloseToBottom durch isCloseToRight.

isCloseToRight = ({ layoutMeasurement, contentOffset, contentSize }) => {
    const paddingToRight = 20;
    return layoutMeasurement.width + contentOffset.x >= contentSize.width - paddingToRight;
};
2
deadcoder0904

Als Ergänzung zur Antwort von Henrik R:

Wenn Sie wissen müssen, ob der Benutzer das Ende des Inhalts zum Zeitpunkt der Bereitstellung erreicht hat (wenn der Inhalt je nach Gerätegröße möglicherweise nicht zu lang ist oder nicht), ist hier meine Lösung:

<ScrollView 
        onLayout={this.onLayoutScrollView}
        onScroll={this.onScroll}>
    <View onLayout={this.onLayoutScrollContent}>
        {/*...*/}
    </View>
</ScrollView>

in Kombination mit

onLayout(wrapper, { nativeEvent }) {
    if (wrapper) {
        this.setState({
            wrapperHeight: nativeEvent.layout.height,
        });
    } else {
        this.setState({
            contentHeight: nativeEvent.layout.height,
            isCloseToBottom:
              this.state.wrapperHeight - nativeEvent.layout.height >= 0,
        });
    }
}
1
Malte Peters

@Henrik Rs Recht . Sie sollten jedoch auch Math.ceil () verwenden.

function handleInfinityScroll(event) {
        let mHeight = event.nativeEvent.layoutMeasurement.height;
        let cSize = event.nativeEvent.contentSize.height;
        let Y = event.nativeEvent.contentOffset.y;

        if(Math.ceil(mHeight + Y) >= cSize) return true;
        return false;
}

enter image description here

0
Fuad Cavadov

Wenn die Leute hier geholfen haben, füge ich den einfachen Code hinzu, den sie schreiben, um nach oben und nach unten zu gelangen und ich habe ein paar Illustrationen gemacht, um die Dinge einfacher zu machen

 Layout and vars values

<ScrollView
onScroll={({nativeEvent})=>{
if(isCloseToTop(nativeEvent)){
    //do something
}
if(isCloseToBottom(nativeEvent)){
   //do something
}
}}
>
...contents
</ScrollView>



isCloseToBottom({layoutMeasurement, contentOffset, contentSize}){
   return layoutMeasurement.height + contentOffset.y >= contentSize.height - 20;
}



ifCloseToTop({layoutMeasurement, contentOffset, contentSize}){
   return contentOffset.y == 0;
}
0
Louay Alosh