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