在本機中滾動到ScrollView組件底部時調用事件

Question

我有個問題。 如何在ScrollView底部向下滾動反應原生時調用函數？ 請幫我。 非常感謝！

Answer 1

有效！

var windowHeight = Dimensions.get('window').height,
          height = e.nativeEvent.contentSize.height,
          offset = e.nativeEvent.contentOffset.y;
if( windowHeight + offset >= height ){
    console.log('End Scroll')
}

Answer 2

您應該將一個函數傳遞給ScrollView onScroll prop。

更多信息可以在這里找到。

constructor(props){
    super(props)

    this._onScroll = this._onScroll.bind(this)
    this.state = {
      contentOffsetY: 0
    }
  }

_onScroll(e){
    var contentOffset = e.nativeEvent.contentOffset.y;
    this.state.contentOffsetY < contentOffset ? console.log("Scroll Down") : console.log("Scroll Up");
    this.setState({contentOffsetY: contentOffset});
  }

  render(){
    var items = ["1","2","3","4","5"];
    return(
      <ScrollView style={{flex: 1}} onScroll={this._onScroll}>
        {items.map((item, i) => {
          return (
            <View key={i} style={{height: 200}}>
              <Text>{item}</Text>
            </View>
          )
        })}
      </ScrollView>
    )
  }

Answer 3

請使用ScrollView的這兩種方法完整和最終。 不要使用ónScroll'，因為它會在一個滾動條上多次調用。

onStartScrollList = () => {
    this.setState({ isListScrolled: true });
    console.log('onScrollList');
}

onStopScrollList = () => {
    console.log('onStopScrollList');
    this.setState({ isListScrolled: false });

}

現在在'loadMore'方法中檢查'isListScrolled'。