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

Question

Reactive Native Expo 移动应用程序：我正在使用 React Native Snap Carousel using this tutorial 从我的数据库中弹出图像。

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

在拥有多个轮播时，分页索引现在会随着所有分页使用相同的索引和轮播参考而共同移动。

请告诉我如何映射轮播参考和分页索引，以便我的 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>
   );
}

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

Multiple Carousel Pagination sync issue inside Infinite FlatList

react-native

jsx

react-native-snap-carousel