css - 当滚动到水平视图中的更多数据时，Flatlist 会更改 renderItem 的位置

Question

我在顶部地图视图上有地图视图我正在渲染Flatlist包含 500 多个数据的水平滚动卡片。卡片在底部，在中间，显示了下一张和上一张卡片的一部分，但在滚动 20 到 30 后，它开始向左侧移动，越走越远，卡片完全放错了位置

<Animated.FlatList
          ref={scrollView}
          horizontal
          pagingEnabled
          decelerationRate={0}
          getItemLayout={(data, index) => ({
            length: CARD_WIDTH,
            offset: (CARD_WIDTH + 20) * index,
            index,
          })}
          scrollEventThrottle={1}
          onScrollToIndexFailed={() => {}}
          showsHorizontalScrollIndicator={false}
          snapToInterval={CARD_WIDTH + 20}//CARD_WIDTH = 310 AND 20  IS MARGIN
          snapToAlignment="center"
          style={styles.scrollView}
          contentInset={{
            top: 0,
            left: SPACING_FOR_CARD_INSET,//SPACING_FOR_CARD_INSET=width - (CARD_WIDTH+20)/2
            bottom: 0,
            right: SPACING_FOR_CARD_INSET,
          }}
          contentContainerStyle={{
            paddingHorizontal:
              Platform.OS === 'android' ? SPACING_FOR_CARD_INSET : 0,
          }}
          onScroll={Animated.event(
            [
              {
                nativeEvent: {
                  contentOffset: {
                    x: mapAnimation,
                  },
                },
              },
            ],
            {useNativeDriver: true},
          )}
          data={stationData}
          renderItem={renderPromotionItem}
          scrollsToTop={false}
          
          keyExtractor={item => item.id}
        />

标签： cssreact-nativereact-native-flatlist