Reanimated를 사용하여 React Native에서 자동 스크롤, 무한 루프, 페이지 매김을 사용하여 사용자 정의 가능한 캐러셀 구축

React Native에서 맞춤형 캐러셀을 만드는 것은 애플리케이션에 시각적 감각과 상호작용성을 추가하는 좋은 방법입니다. 이번 블로그에서는 React Native의 Animated 및 Reanimated 라이브러리를 사용하여 자동 스크롤 기능이 포함된 캐러셀을 구축하는 방법을 살펴보겠습니다. 또한 애니메이션 도트와 우아한 이미지 전환 효과를 갖춘 페이지 매김 시스템을 구현할 것입니다.

개요

이 튜토리얼에서는 다음 내용을 다룹니다.

• Custom Carousel 구성 요소를 설정합니다.
• 부드러운 애니메이션과 보간을 위해 재애니메이션을 사용합니다.
• 이미지 간 자동 회전이 가능한 자동 스크롤 기능
• 애니메이션 점 표시기를 사용하여 페이지 매김 시스템 구축

우리가 구축할 것:

• 애니메이션 전환이 가능한 가로 스크롤 캐러셀.
• 사용자가 캐러셀과 상호작용할 때 일시 정지되는 자동 스크롤.
• 현재 표시되는 항목을 기반으로 업데이트되는 페이지 매김 점

시작해 봅시다!

---

1. 캐러셀 구성요소 설정

캐러셀의 핵심 로직을 담을 CustomCarousel 구성요소를 만드는 것부터 시작합니다. 주요 요소는 다음과 같습니다:

• 항목 렌더링을 위한 Animated.FlatList.
• setInterval을 사용한 자동 스크롤 메커니즘
• 전환 애니메이션을 위한 Reanimated의 scrollTo 및 useSharedValue.

/* eslint-disable react-native/no-inline-styles */
import React, { useEffect, useRef, useState } from 'react';
import { StyleSheet, View, useWindowDimensions } from 'react-native';
import Animated, {
  scrollTo,
  useAnimatedRef,
  useAnimatedScrollHandler,
  useDerivedValue,
  useSharedValue,
} from 'react-native-reanimated';
import { hpx } from '../../helpers';
import Pagination from './Pagination';
import RenderItem from './RenderItem';
import { animals } from './constants';

const CustomCarousel = () => {
  const x = useSharedValue(0);
  const [data, setData] = useState(animals);
  const { width } = useWindowDimensions();
  const [currentIndex, setCurrentIndex] = useState(0);
  const [paginationIndex, setPaginationIndex] = useState(0);
  const ref = useAnimatedRef();
  const [isAutoPlay, setIsAutoPlay] = useState(true);
  const interval = useRef();
  const offset = useSharedValue(0);

  console.log('CURRENT_CAROUSEL_ITEM?', paginationIndex);

  const onViewableItemsChanged = ({ viewableItems }) => {
    if (viewableItems[0].index !== undefined && viewableItems[0].index !== null) {
      setCurrentIndex(viewableItems[0].index);
      setPaginationIndex(viewableItems[0].index % animals.length);
    }
  };

  const viewabilityConfig = {
    itemVisiblePercentThreshold: 50,
  };

  const viewabilityConfigCallbackPairs = useRef([{ viewabilityConfig, onViewableItemsChanged }]);

  const onScroll = useAnimatedScrollHandler({
    onScroll: (e) => {
      x.value = e.contentOffset.x;
    },
    onMomentumEnd: (e) => {
      offset.value = e.contentOffset.x;
    },
  });

  useDerivedValue(() => {
    scrollTo(ref, offset.value, 0, true);
  });

  useEffect(() => {
    if (isAutoPlay === true) {
      interval.current = setInterval(() => {
        offset.value += width;
      }, 4000);
    } else {
      clearInterval(interval.current);
    }
    return () => {
      clearInterval(interval.current);
    };
  }, [isAutoPlay, offset, width]);

  return (
    <View style={styles.container}>
      <Animated.FlatList
        ref={ref}
        style={{ height: hpx(194), flexGrow: 0 }}
        onScrollBeginDrag={() => {
          setIsAutoPlay(false);
        }}
        onScrollEndDrag={() => {
          setIsAutoPlay(true);
        }}
        onScroll={onScroll}
        scrollEventThrottle={16}
        horizontal
        bounces={false}
        pagingEnabled
        showsHorizontalScrollIndicator={false}
        viewabilityConfigCallbackPairs={viewabilityConfigCallbackPairs.current}
        onEndReached={() => setData([...data, ...animals])}
        onEndReachedThreshold={0.5}
        data={data}
        keyExtractor={(_, index) => `list_item${index}`}
        renderItem={({ item, index }) => {
          return <RenderItem item={item} index={index} x={x} />;
        }}
      />
      <Pagination paginationIndex={paginationIndex} />
    </View>
  );
};

export default CustomCarousel;

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  buttonContainer: {
    justifyContent: 'center',
    alignItems: 'center',
    flexDirection: 'row',
    gap: 14,
  },
});

2. 페이지 매김 구성요소

페이지 매김 구성 요소는 현재 활성 슬라이드를 나타내는 점을 표시합니다. 캐러셀의 현재 인덱스에 따라 각 점의 불투명도가 변경됩니다.

import React from 'react';
import { StyleSheet, View } from 'react-native';
import { hpx } from '../../helpers';
import Dot from './Dot';
import { animals } from './constants';

const Pagination = ({ paginationIndex }) => {
  return (
    <View style={styles.container}>
      {animals.map((_, index) => {
        return <Dot index={index} key={index} paginationIndex={paginationIndex} />;
      })}
    </View>
  );
};

export default Pagination;

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    marginTop: hpx(16),
    justifyContent: 'center',
    alignItems: 'center',
  },
});

3. 도트 컴포넌트

Dot 구성 요소는 페이지 매김 시스템에서 각 개별 점의 모양을 처리합니다. 도트의 활성 여부(현재 인덱스)에 따라 스타일이 변경됩니다.

import React from 'react';
import { StyleSheet, View } from 'react-native';
import { Colors } from '../../assets';
import { hpx, wpx } from '../../helpers';

const Dot = ({ index, paginationIndex }) => {
  return <View style={paginationIndex === index ? styles.dot : styles.dotOpacity} />;
};

export default Dot;

const styles = StyleSheet.create({
  dot: {
    backgroundColor: Colors.white,
    height: hpx(3),
    width: wpx(12),
    marginHorizontal: 2,
    borderRadius: 8,
  },
  dotOpacity: {
    backgroundColor: Colors.white,
    height: hpx(3),
    width: wpx(12),
    marginHorizontal: 2,
    borderRadius: 8,
    opacity: 0.5,
  },
});

4. RenderItem 구성요소

RenderItem 구성 요소는 각 캐러셀 항목을 표시합니다. Reanimated의 보간 기능을 활용하여 스크롤할 때 항목의 불투명도를 애니메이션화합니다.

import React from 'react';
import { StyleSheet, useWindowDimensions, View } from 'react-native';
import Animated, { Extrapolation, interpolate, useAnimatedStyle } from 'react-native-reanimated';
import { hpx, nf, SCREEN_WIDTH, wpx } from '../../helpers/Scale';

const RenderItem = ({ item, index, x }) => {
  const { width } = useWindowDimensions();

  const animatedStyle = useAnimatedStyle(() => {
    const opacityAnim = interpolate(
      x.value,
      [(index - 1) * width, index * width, (index + 1) * width],
      [-0.3, 1, -0.3],
      Extrapolation.CLAMP
    );
    return {
      opacity: opacityAnim,
    };
  });

  return (
    <View style={{ width }}>
      <Animated.Image
        resizeMode="cover"
        source={{ uri: item.image }}
        style={[styles.titleImage, animatedStyle]}
      />
    </View>
  );
};

export default RenderItem;

const styles = StyleSheet.create({
  titleImage: {
    width: SCREEN_WIDTH - wpx(32), // adjust the width of the image and horizontal padding
    height: hpx(194),
    alignSelf: 'center',
    borderRadius: nf(16),
  },
});

5. 자동 스크롤

자동 스크롤 기능은 setInterval의 도움으로 구현됩니다. 이 방법을 사용하면 캐러셀이 4초마다 한 슬라이드에서 다음 슬라이드로 자동으로 이동합니다. 사용자가 드래그를 통해 캐러셀과 상호작용하면 자동 스크롤이 일시 중지됩니다.

6. 상수 파일

/* eslint-disable react-native/no-inline-styles */
import React, { useEffect, useRef, useState } from 'react';
import { StyleSheet, View, useWindowDimensions } from 'react-native';
import Animated, {
  scrollTo,
  useAnimatedRef,
  useAnimatedScrollHandler,
  useDerivedValue,
  useSharedValue,
} from 'react-native-reanimated';
import { hpx } from '../../helpers';
import Pagination from './Pagination';
import RenderItem from './RenderItem';
import { animals } from './constants';

const CustomCarousel = () => {
  const x = useSharedValue(0);
  const [data, setData] = useState(animals);
  const { width } = useWindowDimensions();
  const [currentIndex, setCurrentIndex] = useState(0);
  const [paginationIndex, setPaginationIndex] = useState(0);
  const ref = useAnimatedRef();
  const [isAutoPlay, setIsAutoPlay] = useState(true);
  const interval = useRef();
  const offset = useSharedValue(0);

  console.log('CURRENT_CAROUSEL_ITEM?', paginationIndex);

  const onViewableItemsChanged = ({ viewableItems }) => {
    if (viewableItems[0].index !== undefined && viewableItems[0].index !== null) {
      setCurrentIndex(viewableItems[0].index);
      setPaginationIndex(viewableItems[0].index % animals.length);
    }
  };

  const viewabilityConfig = {
    itemVisiblePercentThreshold: 50,
  };

  const viewabilityConfigCallbackPairs = useRef([{ viewabilityConfig, onViewableItemsChanged }]);

  const onScroll = useAnimatedScrollHandler({
    onScroll: (e) => {
      x.value = e.contentOffset.x;
    },
    onMomentumEnd: (e) => {
      offset.value = e.contentOffset.x;
    },
  });

  useDerivedValue(() => {
    scrollTo(ref, offset.value, 0, true);
  });

  useEffect(() => {
    if (isAutoPlay === true) {
      interval.current = setInterval(() => {
        offset.value += width;
      }, 4000);
    } else {
      clearInterval(interval.current);
    }
    return () => {
      clearInterval(interval.current);
    };
  }, [isAutoPlay, offset, width]);

  return (
    <View style={styles.container}>
      <Animated.FlatList
        ref={ref}
        style={{ height: hpx(194), flexGrow: 0 }}
        onScrollBeginDrag={() => {
          setIsAutoPlay(false);
        }}
        onScrollEndDrag={() => {
          setIsAutoPlay(true);
        }}
        onScroll={onScroll}
        scrollEventThrottle={16}
        horizontal
        bounces={false}
        pagingEnabled
        showsHorizontalScrollIndicator={false}
        viewabilityConfigCallbackPairs={viewabilityConfigCallbackPairs.current}
        onEndReached={() => setData([...data, ...animals])}
        onEndReachedThreshold={0.5}
        data={data}
        keyExtractor={(_, index) => `list_item${index}`}
        renderItem={({ item, index }) => {
          return <RenderItem item={item} index={index} x={x} />;
        }}
      />
      <Pagination paginationIndex={paginationIndex} />
    </View>
  );
};

export default CustomCarousel;

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  buttonContainer: {
    justifyContent: 'center',
    alignItems: 'center',
    flexDirection: 'row',
    gap: 14,
  },
});

7. 결론

이 튜토리얼에서는 부드러운 애니메이션과 보간을 위해 Reanimated와 함께 React Native의 FlatList를 사용하여 맞춤형 캐러셀을 구축했습니다. 애니메이션 점, 자동 스크롤 기능이 포함된 페이지 매김 시스템을 추가하고 사용자 상호 작용이 일시 중지되고 자동 스크롤 기능을 다시 시작하도록 했습니다.

이러한 구성요소를 사용하면 캐러셀을 확장하여 동적 콘텐츠, 클릭 가능한 항목, 더욱 정교한 애니메이션과 같은 다른 기능을 포함할 수 있습니다. Reanimated가 포함된 React Native의 유연성을 통해 최소한의 성능 비용으로 고도로 사용자 정의 가능한 캐러셀이 가능하므로 시각적으로 매력적인 모바일 앱을 만드는 데 적합합니다.

이 기능을 프로젝트에서 자유롭게 사용해 보고 디자인 요구 사항에 맞게 스타일과 동작을 맞춤설정하세요!

위 내용은 Reanimated를 사용하여 React Native에서 자동 스크롤, 무한 루프, 페이지 매김을 사용하여 사용자 정의 가능한 캐러셀 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!