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

Question

反应原生： 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项目组件：

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组件在水平滚动时考虑分隔符组件的宽度并进行适当的偏移？

Answer 1

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

步骤1）不要使用ItemSeparatorComponent道具。相反，将其内联呈现在您的renderItem组件中。

步骤 2）（关键点）。在 的道具中指定width和。的，你的情况，应该是。heightstyleFlatListwidthSCREEN_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

Answer 2

您在函数中返回的顶级视图的renderPhoto宽度为SCREEN_WIDTH，但在每个 item 之间呈现的ItemSeparatorComponent，根据您的样式定义占用的宽度为 5。因此，对于滚动到的每个附加项目，初始偏移量将在左侧多出 5 个像素。

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

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