React Native：使用项目分隔符在水平 FlatList 中正确滚动

Posted 2023-02-16

【中文标题】React Native：使用项目分隔符在水平 FlatList 中正确滚动

【英文标题】：React Native: Correct scrolling in horizontal FlatList with Item Separator

【发布时间】：2018-07-14 13:21:15

【问题描述】：

ReactNative：v0.52.0

平台：ios

我的FlatList 代码：

<FlatList
  horizontal
  pagingEnabled=true
  showsHorizontalScrollIndicator=false

  legacyImplementation=false

  data=this.props.photos
  renderItem=item => this.renderPhoto(item)
  keyExtractor=photo => photo.id

  ItemSeparatorComponent=this.itemSeparatorComponent
/>

项目分隔码：

itemSeparatorComponent = () => 
    return <View style = 
        
            height: '100%',
            width: 5,
            backgroundColor: 'red',
        
    
    />

最后是FlatList item 组件：

renderPhoto = ( item, index ) => 
    return (
        <View style =  width: SCREEN_WIDTH, height: 'auto' >
          <FastImage 
            style =  styles.photo 
            resizeMode =  FastImage.resizeMode.contain 
            source =  uri: item.source.uri 
          /> 
        </View>
    )

但是在滚动时，FlatList 会偏移到分隔符，但不会偏移到项目的左边缘：

对于每个新元素，FlatList 将所有先前分隔符的宽度添加到偏移量：

如何让FlatList组件在水平滚动时考虑到分隔符组件的宽度并进行适当的偏移？

【参考方案1】：

我有同样的用例。对于任何寻求解决方案的人，这里就是。

第 1 步）不要使用 ItemSeparatorComponent 属性。相反，将其内嵌在您的 renderItem 组件中。

步骤 2)（关键点）。在FlatList 的style 属性中指定width 和height。在您的情况下，width 应该是 SCREEN_WIDTH + 5。

然后Flatlist 将在启用分页时自动将整个屏幕（照片+分隔符）移开。所以现在你的代码应该是这样的：-

<FlatList
  horizontal
  pagingEnabled=true
  showsHorizontalScrollIndicator=false
  legacyImplementation=false
  data=this.props.photos
  renderItem=item => this.renderPhoto(item)
  keyExtractor=photo => photo.id
  style=width: SCREEN_WIDTH + 5, height:'100%'
/>

渲染照片代码：-

renderPhoto = ( item, index ) => 
return (
    <View style =  width: SCREEN_WIDTH + 5, height: 'auto', 
      flexDirection:'row'>
      <FastImage 
        style =  styles.photo 
        resizeMode =  FastImage.resizeMode.contain 
        source =  uri: item.source.uri 
      /> 
      this. itemSeparatorComponent()
    </View>
)

项目分隔码：

itemSeparatorComponent = () => 
return <View style = 
    
        height: '100%',
        width: 5,
        backgroundColor: 'red',
    

/>

如果还是想不通，那就看看这个组件：https://github.com/zachgibson/react-native-parallax-swiper

尝试进入实现，你会看到这家伙已经为Animated.ScrollView提供了宽度和高度。https://github.com/zachgibson/react-native-parallax-swiper/blob/master/src/ParallaxSwiper.js 行号：93 - 97

【参考方案2】：

您在renderPhoto 函数中返回的***视图的宽度为SCREEN_WIDTH，而ItemSeparatorComponent（renders in between each item）根据您的样式定义占用了 5 的宽度。因此，对于您滚动到的每个附加项目，初始偏移量将在左侧多 5 个像素。

要解决此问题，您可以完全删除ItemSeparatorComponent（因为您已经将pagingEnabled 设置为true），或者将renderPhoto 中返回的***视图的宽度设置为等于SCREEN_WIDTH - 2.5 .这样，您将在一张照片的右边缘看到一半的项目分隔符，而另一半在下一张照片的左边缘。

实际上，另一种可能的解决方案是删除项目分隔符，将renderPhoto View 的宽度设置为SCREEN_WIDTH + 5，然后在样式中包含这些附加属性：paddingRight: 5, borderRightWidth: 5, borderRightColor: 'red'。这样，由于pagingEnabled 属性，红色分隔符在左右滚动之前不会可见。