react-native - 如何在反应原生快照轮播的一个分页中显示2个项目

Question

如何为一个分页（第一个点）显示 2 个项目，如果我们滑动，那么接下来的 2 个项目应该显示并显示第二个点处于活动状态。

如果它很奇怪，那么最后一项应该在 react native snap carousel 中显示我自己的组件。

Answer 1

创建一个函数，根据您想要的大小将“条目”数组拆分为更小的数组

var slides = [];
const entriesSplitter = () => {
    let size = 2; //Based on the size you want
    while (entries.length > 0) {
        slides.push(entries.splice(0, size));
    }
};

然后传递幻灯片数组，<Carousel data={slides}/>然后渲染每张幻灯片_renderItem

考虑以下示例：-

import React, { useState, useRef } from "react";
import { View,Text, Dimensions } from "react-native";
import Carousel, { Pagination } from "react-native-snap-carousel";

const { width: screenWidth, height: screenHeight } = Dimensions.get("window");

const myCarousel = () => {
const [activeSlide, setActiveSlide] = useState(0);
const carousel = useRef();
const entries = [
    {
        title: "Adidas"
    },
    {
        title: "Nike"
    },
    {
        title: "Puma"
    },
    {
        title: "Reebok"
    }
];

var slides = [];

const entriesSplitter = () => {
    let size = 2; //Based on the size you want
    while (entries.length > 0) {
        slides.push(entries.splice(0, size));
    }
};

// render every single slide
const _renderItem = ({ item,index }) => {
    return (
        <View style={{ flexDirection: "row", flexWrap: "wrap" }}>
            {item.map(item => {
                return <Text key={index}>{item.title}</Text>;
            })}
        </View>
    );
};

return (
    <View>
        {entriesSplitter()}
        <Carousel
            ref={carousel}
            data={slides}
            renderItem={_renderItem}
            onSnapToItem={index => setActiveSlide(index)}
            sliderWidth={screenWidth}
            sliderHeight={screenHeight}
            itemWidth={screenWidth}
        />
        <Pagination
            dotsLength={2} // also based on number of sildes you want
            activeDotIndex={activeSlide}
            containerStyle={{ backgroundColor: "red", borderWidth: 2 }}
            dotStyle={{
                width: 10,
                height: 10,
                borderRadius: 5,
                marginHorizontal: 8,
                backgroundColor: "black"
            }}
            inactiveDotStyle={{
                backgroundColor: "pink"
            }}
            inactiveDotOpacity={0.4}
            inactiveDotScale={0.6}
        />
    </View>
);
};

export default myCarousel;

Answer 2

我建议您继续在 Carousel 中制作您正在渲染的项目，该项目一次渲染 2 件事情。Carousel 将对您传递给它的任何内容进行分页，因此，如果您传递包含 2 个项目的内容，它将对其进行分页，例如：

   <Carousel
    layout="default"
    data={arr}
    renderItem={
      ({ item, index }) => (
        <View style={styles.imageWrapper}>
            <Image
              style={styles.image}
              source={item[0]}
              resizeMode="cover"
              accessibilityLabel="thumbnail"
            />
            <Image
              style={styles.image}
              source={item[1]}
              resizeMode="cover"
              accessibilityLabel="thumbnail"
            />
        </View>
      )
    }
    lockScrollWhileSnapping={true} // Prevent the user from swiping again while the carousel is snapping to a position.
    sliderWidth={screenWidth}
    sliderHeight={screenWidth * 0.5}
    itemWidth={screenWidth - 40}
    activeSlideOffset={50}
    enableSnap
    onSnapToItem={onSnapToItem}
    removeClippedSubviews={false}
    firstItem={0}
    contentContainerCustomStyle={styles.style}
  />

Answer 3

这就是我实现显示 3 个轮播的方式。我们可以通过多种方式对其进行自定义

import React from "react";
import { View, Dimensions, StyleSheet, Image } from "react-native";
import Carousel from "react-native-snap-carousel";

const windowWidth = Dimensions.get("window").width;

export default function MyCarousel() {
  const images = [
    { id: 1, image: require("../assets/home-slider-1.jpg") },
    { id: 2, image: require("../assets/home-slider-2.jpg") },
    { id: 3, image: require("../assets/home-slider-3.jpg") },
    { id: 4, image: require("../assets/home-slider-4.jpg") }
  ];

  // const imagesUri = [
  //   { id: 1, image: { uri: 'https://i.imgur.com/gG5Egof.jpg' } },
  //   { id: 2, image: { uri: 'https://i.imgur.com/gG5Egof.jpg' } },
  //   { id: 3, image: { uri: 'https://i.imgur.com/gG5Egof.jpg' } },
  //   { id: 4, image: { uri: 'https://i.imgur.com/gG5Egof.jpg' } }
  // ];

  const _renderItem = ({ item }) => {
    return (
      <View style={styles.slide}>
        <Image
          source={item.image}
          style={styles.image}
          // resizeMode="center"
        ></Image>
      </View>
    );
  };

  return (
    <View style={styles.wrapper}>
      <Carousel
        data={images}
        renderItem={_renderItem}
        sliderWidth={windowWidth}
        itemWidth={windowWidth - 70}
        enableMomentum={false}
        lockScrollWhileSnapping
        autoplay
        useScrollView
        loop
        autoplayInterval={3000}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  wrapper: {
    height: 150
  },
  slide: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#fff"
  },
  image: {
    flex: 1,
    height: "100%",
    width: "100%",
    alignItems: "center",
    justifyContent: "center"
  }
});