Question

嘿！

很快，我想在我的Expo应用程序中使用Pagination，无法弄清楚如何使用React本机的Carousel Pagination文档。 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,
      }}
    />

很抱歉，冗长的代码和帖子。 我只是想不出如何用我的代码修改上面所附的文档。

Answer 1

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

您还应该创建一个保存活动幻灯片索引的状态。每次触发onSnapToItem并在您赋予onSnapToItem的函数中向左/向右滑动时，都应设置当前的幻灯片索引，以便可以产生滑动效果。

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

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

这是演示Expo Snack

与轮播反应本地分页

1 个答案: