Infinite FlatList 中的多个轮播分页同步问题

Question

Reactive Native Expo Mobile App：我正在使用React Native Snap Carousel using this tutorial 从我的数据库中弹出图像。

我有一个无限的平面列表，其中包含单个条目作为 React Native Snap Carousels，因此有多个带有多个分页的轮播。

在有多个轮播时，分页索引现在普遍移动，因为所有分页都使用相同的索引和轮播引用。

请告诉我如何映射轮播引用和分页索引，以便我的 FlatList 中的多个轮播正常工作。

我正在使用的代码，供参考：

const isCarousel = React.useRef(null);
const [index, setIndex] = React.useState(0);

const renderItem = ({item}) => {
return(
                // Some Card Stuff...
                <Carousel
                layout="tinder"
                layoutCardOffset={9}
                ref={isCarousel}
                data={photoArray}
                renderItem={CarouselCardItem}
                sliderWidth={SLIDER_WIDTH}
                itemWidth={ITEM_WIDTH}
                inactiveSlideShift={0}
                onSnapToItem={(index) => setIndex(index)}
                useScrollView={true}
              />
              <Pagination
                      dotsLength={photoArray.length}
                      activeDotIndex={index}
                      carouselRef={isCarousel}
                      dotStyle={{
                        width: 10,
                        height: 10,
                        borderRadius: 5,
                        marginHorizontal: 0,
                        backgroundColor: 'rgba(0, 0, 0, 0.92)'
                      }}
                      inactiveDotStyle={{
                        backgroundColor: 'rgba(4, 5, 3, 0.92)'
                      }}
                      inactiveDotOpacity={0.4}
                      inactiveDotScale={0.6}
                      tappableDots={true}
                    />
// Some more Stuff....
)

还有主要的 FlatList：

return (
        <FlatList 
        data={data_data} 
        renderItem={renderItem}
        keyExtractor = {item => `${item.identifier}`}
        ListFooterComponent = {Loader}
        onEndReached = {loadStuff}
        onRefresh = {() => refreshData()}
        refreshing = {isRefreshing}
/>
)

Answer 1

使用您的代码制作自定义轮播组件

const MyCarousel =({item}) => {
   const isCarousel = React.useRef(null);
   const [index, setIndex] = React.useState(0);
   
   return (
     <React.Fragment>
     <Carousel
        layout="tinder"
        layoutCardOffset={9}
        ref={isCarousel}
        data={photoArray}
        renderItem={CarouselCardItem}
        sliderWidth={SLIDER_WIDTH}
        itemWidth={ITEM_WIDTH}
        inactiveSlideShift={0}
        onSnapToItem={(index) => setIndex(index)}
        useScrollView={true}/>
        <Pagination
          dotsLength={photoArray.length}
          activeDotIndex={index}
          carouselRef={isCarousel}
          dotStyle={{
           width: 10,
           height: 10,
           borderRadius: 5,
           marginHorizontal: 0,
           backgroundColor: 'rgba(0, 0, 0, 0.92)'
          }}
          inactiveDotStyle={{ backgroundColor: 'rgba(4, 5, 3, 0.92)' }}
          inactiveDotOpacity={0.4}
          inactiveDotScale={0.6}
          tappableDots={true}/>
    </React.Fragment>
   )
}

然后像下面这样使用它

const renderItem = ({item}) => {
   return(
    <View>
     <MyCarousel item={item}/> 
     // Some more Stuff....
    </View>
   );
}