Question

这是我的代码，用于在React-native中生成分页滚动视图：

        <ScrollView
          horizontal
          pagingEnabled
          onScrollEndDrag={this.handlePagerScroll}
          scrollsToTop={false}
          scrollEventThrottle={100}
          removeClippedSubviews={false}
          automaticallyAdjustContentInsets={false}
          directionalLockEnabled
          showsHorizontalScrollIndicator={false}
          showsVerticalScrollIndicator={false}
        >
          { renderPageHere() }
        </ScrollView>

上面的代码正在工作。附加到this.handlePagerScroll事件的函数onScrollEndDrag也正在工作。问题在于，由于onScrollEndDrag没有事件参数，我无法确定当前处于活动状态的页面

我认为使用x或y中的值进行简单数学运算无济于事，因为我不知道如何获取它们

有人知道我的问题并且可以为我提供任何解决方案吗？谢谢

Answer 1

我已经使用FlatList制作了一个水平分页视图，并且在FlatList中识别可见项非常容易。

<FlatList 
horizontal={true} 
pagingEnabled 
removeClippedSubviews={false} 
data={listData} 
onViewableItemsChanged={data => { this.viewableItem(data) }} renderItem={this.renderRow} 
keyExtractor={(item, index) => item.id}
/>

更新

根据GitHub上发布的问题，@ DennyHiu也提到了该问题

您可以使用

viewabilityConfig = {this.viewabilityConfig}

像这样

this.viewabilityConfig = {
            itemVisiblePercentThreshold: 50,
            minimumViewTime: 1,
        };

<FlatList
  key={this.state.key}
  onViewableItemsChanged={this.handleViewableItemsChanged}
  viewabilityConfig={this.viewabilityConfig}
  data={this.state.timeline}
  renderItem={({item}) => {}}
 />

水平分页：如何查找当前处于活动状态的页面？

1 个答案: