react-native - react native : Correct scrolling in horizontal FlatList with Item Separator

Question

react 原生: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和 height在 style FlatList的 Prop . 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