用轮播反应本机分页

Question

嘿嘿！

不久，我想在我的 Expo 应用程序中使用分页，无法弄清楚如何使用 React 本机 Carousel 分页文档来实现它。 Pagination Docs link

数据数组：

 const data = [
{
  bars: [
    { x: "Sun", y: 50 },
    { x: "Mon", y: 100 },
    { x: "Tue", y: 150 },
    { x: "Wed", y: 200 },
    { x: "Thr", y: 250 },
    { x: "Fri", y: 300 },
  ],
},
{
  pie: [
    { x: "Men", y: 35 },
    { x: "Women", y: 40 },
    { x: "Children", y: 55 },
  ],
},

];

RenderItem(取其样，另一个“IF”与这里类似：

const RenderItem = ({ item, index }) => {
if (item.bars) {
  return (
    <View style={{ backgroundColor: "#fff" }}>
      <View style={{ backgroundColor: "#fff" }}>
        <Text
          style={{
            textAlign: "center",
            fontWeight: "600",
            color: "black",
          }}
        >
          Weekly Income Graph:
        </Text>
      </View>
      <TouchableWithoutFeedback>
        <VictoryChart>
          <VictoryGroup>
            <VictoryBar
              data={item.bars}
              alignment="start"
              barRatio={0.2}
              style={{ data: { fill: "#c43a31" } }}
            />
          </VictoryGroup>
        </VictoryChart>
      </TouchableWithoutFeedback>
    </View>

分页组件：

 <Pagination
      dotsLength={data.length}
      activeDotIndex={} // Cant figure out what to put here.
      dotStyle={{
        width: 10,
        height: 10,
        borderRadius: 5,
        marginHorizontal: 8,
        color: "black",
      }}
      inactiveDotStyle={{
        color: "green",
      }}
      inactiveDotOpacity={0.4}
      inactiveDotScale={0.6}
    />

轮播：

<Carousel
      layout={"tinder"}
      ref={carouselRef}
      data={data} 
      renderItem={RenderItem}
      sliderWidth={width}
      itemWidth={width - 10}
      swipeThreshold={100}
      layoutCardOffset={-12}
      inactiveSlideOpacity={0.4}
      containerCustomStyle={{
        overflow: "visible",
        marginVertical: 5,
      }}
      contentContainerCustomStyle={{
        paddingTop: 0,
      }}
    />

对于长代码和post我真的很抱歉。 我根本不知道如何用我的代码调整上面附加的文档。

Answer 1

您似乎忘记在 Carousel 组件上实现 onSnapToItem。

您还应该创建一个保存活动幻灯片索引的状态。当您每次滑动 left/right 时 onSnapToItem 被触发并且在您给 onSnapToItem 的函数中，您应该设置当前幻灯片索引以便可以发生滑动效果。

const [activeSlide, setActiveSlide] = useState(0);

<Carousel>
    ...
       onSnapToItem={(index) => setActiveSlide(index) }
    ...
    </Carousel>

这是演示Expo Snack

用轮播反应本机分页

React native Pagination with carousel

pagination

carousel

react-native