如何在react-native-flatlist中找到滚动在屏幕末尾的滚动偏移量

时间:2019-10-08 09:12:43

标签: react-native react-native-flatlist

我已经使用了scrollOffset和scrollToEnd和scrollToIndex来明智地加载项目15。加载所有项目之后,我只需要向上和向下移动项目,只需向上和向下移动15个项目即可。

我的问题是到达终点后,将其与渲染项目的高度相加。因此,它将导致最后显示空白区域。这是我的代码。

goToTop在这里工作

  <View style={{flex:1}}>
            <FlatList
              ref={(ref) => { this.flatListRef = ref; }}
              data={filteredItems}
              renderItem={({ item }) => this.renderItem(item)}
              numColumns={2}
              extraData={this.props.pagination}
              keyExtractor={item => item.id}
              onEndReached={this._handleMoreItems}
              onEndReachedThreshold={0.001}
              ListFooterComponent={this._renderFooter}
              onScroll={event => {
                this.yOffset = event.nativeEvent.contentOffset.y
              }}
              scrollEventThrottle={2}
              onMomentumScrollEnd={e => this.scroll(e.nativeEvent.contentOffset)}
            />
            <TouchableOpacity onPress={()=> this.goToTop()} style={{ position: 'absolute', width: 50, height: 50, alignItems: 'center', justifyContent: 'center', right: 1, bottom: 40}}>
               <Image style={{width: '45%', height: '45%'}} source={{"up"}}/>
              </TouchableOpacity>
              <TouchableOpacity onPress={()=> this.gotoBottom()} style={{position: 'absolute', width: 50, height: 50, alignItems: 'center', justifyContent: 'center',right: 1, bottom: 0}}>
                <Image style={{width: '45%', height: '45%'}} source={{ "down"}}/>
              </TouchableOpacity>
          </View>



goToTop = () => {
    const indexInRange = this.state.index - itemsUpDown >= 0;
   if (indexInRange) {
     this.flatListRef.scrollToOffset({
       offset:(this.state.index-itemsUpDown)*deviceHeight+(this.state.index-itemsUpDown)*2
     });
     this.setState({
       index: this.state.index - itemsUpDown,
     });
   } else {
     this.flatListRef.scrollToIndex({ index: 0 });
     this.setState({
       index: 0,
     });
   }
  }




  gotoBottom = () => {
  const indexInRange = this.state.index + itemsUpDown <= this.props.pagination - 1;
    if (indexInRange) {
       this.flatListRef.scrollToEnd();
        this.setState({
          index: this.props.pagination - 1,
        });
    } else {
      this.flatListRef.scrollToOffset({
         offset: (this.state.index+itemsUpDown)*deviceHeight+(this.state.index+itemsUpDown)
       });
       this.setState({
         index: this.state.index + itemsUpDown,
       });
    }
  }

0 个答案:

没有答案