如何创建包含多个项目（如所附图像）的轮播？

Question

有没有任何库可以创建这样的轮播？我尝试过react-native-snap-carousel，但它没有这个功能。

我也尝试过react-native-reanimated-carousel，但他们的文档没有太大帮助。你能试着给我指出正确的方向吗？

如果有一种方法可以在没有库的情况下编写它并且错误更少，那将会很有帮助，因为我将在主屏幕上渲染很多这个组件。

react-native-snap-carousel

<ScrollView style={{ backgroundColor: "#f2f2f2" }}>
      {/* Pagination Carousel */}
      <Carousel
        ref={isCarousel}
        onSnapToItem={(page) => setPage(page)}
        data={entries}
        renderItem={renderItem4}
        sliderWidth={400}
        itemWidth={250}
        hasParallaxImages={true}
      />
      <Pagination
        activeDotIndex={page}
        carouselRef={isCarousel}
        tappableDots={true}
        inactiveDotOpacity={0.4}
        inactiveDotScale={0.6}
        dotsLength={exploreSongs.length}
        dotStyle={{
          width: 10,
          height: 10,
          borderRadius: 100,
          backgroundColor: "#F54800",
        }}
        inactiveDotStyle={{
          backgroundColor: "grey",
        }}
        containerStyle={{
          marginTop: -30,
        }}
      />

      <View style={{ marginTop: 100 }}></View>
    </ScrollView>

Answer 1

使用

react-native-carousel-reanimated

这应该可以正常工作：

import React from 'react'
import { View, Text, Dimensions } from 'react-native'
import Carousel from 'react-native-reanimated-carousel'

const windowDimensions = Dimensions.get('screen');

export default function CarouselComponent() 
{ 
    const data = [...Array(3).keys()];

    return (
         
        <Carousel
            loop={false}
            autoPlay={false}
            width={windowDimensions.width}
            height={windowDimensions.width}
            data={data} 
            style={{backgroundColor: 'green'}}
            mode="parallax"
            modeConfig={{parallaxScrollingOffset: 200, parallaxScrollingScale: 0.9}}
            renderItem={ () =>
                <View style={{width: '50%', height: '100%', backgroundColor: 'red', alignSelf: 'center'}}>
                    <Text>View</Text>
                </View>
            }>

        </Carousel>
    )
}

检查其存储库中的

parallax

示例以查看更好的实现： https://github.com/dohooo/react-native-reanimated-carousel/blob/main/example/app/src/pages/parallax/index.html tsx