rappel scrollTo dans un ScrollView React natif

Question

Je voudrais appeler une fonction à la fin de la fonction scrollTo appelé comme ça:

scrollTo({y: 0, animated: true}) 

mais par défaut, cette fonction ne dispose pas d'un second paramètre.

Alors, comment puis-je gérer la fin de l'animation de défilement pour déclencher une autre fonction?

Answer 1

Vous pouvez utiliser onMomentumScrollEnd comme mentionné dans this issue

Toutefois, si vous voulez plus de contrôle sur votre état de défilement, vous pouvez mettre en œuvre smth comme ce

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

 
export default class App extends React.Component { 
 
    render() { 
 
    return (
 
     <View style={styles.container}> 
 
     <ScrollView 
 
      style={{ marginVertical: 100 }} 
 
      ref={this.refScrollView} 
 
      onScroll={this.onScroll} 
 
     > 
 
      <Text style={{ fontSize: 20 }}> 
 
      A lot of text here... 
 
      </Text> 
 
     </ScrollView> 
 

 
     <Button title="Scroll Text" onPress={this.scroll} /> 
 
     </View> 
 
    ); 
 
    } 
 

 
    componentDidMount() { 
 
    this.scrollY = 0; 
 
    } 
 

 
    onScroll = ({ nativeEvent }) => { 
 
    const { contentOffset } = nativeEvent; 
 
    this.scrollY = contentOffset.y; 
 
    
 
    if (contentOffset.y === this.onScrollEndCallbackTargetOffset) { 
 
     this.onScrollEnd() 
 
    } 
 
    } 
 

 
    onScrollEnd =() => { 
 
    alert('Text was scrolled') 
 
    } 
 

 
    refScrollView = (scrollView) => { 
 
    this.scrollView = scrollView; 
 
    } 
 

 
    scroll =() => { 
 
    const newScrollY = this.scrollY + 100; 
 
    this.scrollView.scrollTo({ y: newScrollY, animated: true }); 
 
    this.onScrollEndCallbackTargetOffset = newScrollY; 
 
    } 
 
} 
 

 
const styles = StyleSheet.create({ 
 
    container: { 
 
    flex: 1, 
 
    backgroundColor: '#fff', 
 
    padding: 20, 
 
    }, 
 
});