पता लगाएँ स्क्रॉलव्यू अंत

Question

पर पहुंच गया है मेरे पास Text है ScrollView के अंदर लंबे टेक्स्ट के साथ और मैं यह जानना चाहता हूं कि उपयोगकर्ता ने पाठ के अंत तक स्क्रॉल किया है, इसलिए मैं एक बटन सक्षम कर सकता हूं।

मैं ईवेंट ऑब्जेक्ट को onScroll ईवेंट से डिबग कर रहा हूं लेकिन ऐसा कोई प्रतीत नहीं होता है जिसका मैं उपयोग कर सकता हूं।

Answer 1

मैं इसे इस तरह से किया था:

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; 

मैं paddingToBottom जोड़ने के लिए है, क्योंकि आम तौर पर यह आवश्यक नहीं है कि scrollview पिछले पिक्सेल तक नीचे करने के लिए स्क्रॉल किया है चाहता था। लेकिन अगर आप चाहते हैं कि सेट पैडिंग टोबबॉटम शून्य हो।

Answer 2

एक और समाधान ListView का उपयोग एक पंक्ति (आपके टेक्स्ट) के साथ करने के लिए किया जा सकता है जिसमें onEndReached विधि है। जैसे प्रलेखन here

Answer 3

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

देखें इस प्रतिक्रिया देशी 0.44

Answer 4

क्षैतिज scrollview (जैसे Carousels) के लिए isCloseToRight

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