Как найти смещение прокрутки, которое находится в конце экрана, в response-native-flatlist - PullRequest
Новая
       5

Как найти смещение прокрутки, которое находится в конце экрана, в response-native-flatlist

0 голосов
/ 08 октября 2019

Я использовал 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,
       });
    }
  }
...