回调scrollTo在滚动型阵营本地

Question

我想在scrollTo称为像函数的最后调用函数：

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

但默认情况下此功能不会有第二个参数。

那么如何处理滚动动画的结尾来触发其他功能？

Answer 1

您可以使用onMomentumScrollEnd作为this issue

提到不过，如果你想更好地控制您的滚动状态，可以实现平稳此

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, 
 
    }, 
 
});