97在线精品视频免费,大陆极品少妇内射aaaaa,国产,欧美色淫一区二区

首頁(yè)

web前端

js教程

使用 Reanimated 在 React Native 中建立具有自動(dòng)滾動(dòng)、無限循環(huán)、分頁(yè)功能的可自訂輪播

Patricia Arquette

Oct 23, 2024 am 06:21 AM

Building a Customisable Carousel with Auto-Scroll, Infinite Loop, Pagination in React Native using Reanimated

在 React Native 中建立自訂輪播是為應(yīng)用程式添加視覺效果和互動(dòng)性的好方法。在本部落格中，我們將探索如何使用 React Native 的 Animated 和 Reanimated 庫(kù)建立包含自動(dòng)滾動(dòng)功能的輪播。我們還將實(shí)現(xiàn)一個(gè)帶有動(dòng)畫點(diǎn)和優(yōu)雅的圖像過渡效果的分頁(yè)系統(tǒng)。

概述

在本教學(xué)中，我們將介紹以下內(nèi)容：

設(shè)定自訂輪播元件。
使用 Reanimated 實(shí)現(xiàn)流暢的動(dòng)畫和內(nèi)插。
自動(dòng)捲動(dòng)功能，可在影像之間自動(dòng)旋轉(zhuǎn)。
建立一個(gè)帶有動(dòng)畫點(diǎn)指示器的分頁(yè)系統(tǒng)。

我們將建構(gòu)什麼：

有動(dòng)畫轉(zhuǎn)場(chǎng)的水平滾動(dòng)輪播。
當(dāng)使用者與輪播互動(dòng)時(shí)自動(dòng)滾動(dòng)暫停。
根據(jù)目前可見項(xiàng)目更新的分頁(yè)點(diǎn)。

讓我們開始吧！

1. 設(shè)定輪播組件

我們首先建立 CustomCarousel 元件，它將容納輪播的核心邏輯。主要元素包括：

用於渲染項(xiàng)目的 Animated.FlatList。
使用 setInterval 的自動(dòng)滾動(dòng)機(jī)制。
Reanimated的scrollTo和useSharedValue用於動(dòng)畫轉(zhuǎn)換。

/* 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. 分頁(yè)組件

分頁(yè)元件顯示點(diǎn)來指示目前活動(dòng)的幻燈片。每個(gè)點(diǎn)的不透明度都會(huì)根據(jù)輪播的當(dāng)前索引而變化。

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. 點(diǎn)組件

Dot 元件處理分頁(yè)系統(tǒng)中每個(gè)點(diǎn)的外觀。它會(huì)根據(jù)點(diǎn)是否處?kù)痘顒?dòng)狀態(tài)（目前索引）來變更其樣式。

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 元件顯示每個(gè)輪播項(xiàng)目。它利用 Reanimated 的插值函數(shù)來為專案滾動(dòng)時(shí)的不透明度設(shè)定動(dòng)畫。

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. 自動(dòng)捲動(dòng)

自動(dòng)滾動(dòng)功能是透過setInterval來實(shí)現(xiàn)的。此方法可確保輪播每 4 秒自動(dòng)從一張投影片移至下一張投影片。如果使用者透過拖曳與輪播交互，自動(dòng)滾動(dòng)就會(huì)暫停。

6. 常數(shù)檔

/* 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. 結(jié)論

在本教程中，我們使用 React Native 的 FlatList 以及 Reanimated 建立了一個(gè)自訂輪播以實(shí)現(xiàn)流暢的動(dòng)畫和插值。我們新增了具有動(dòng)畫點(diǎn)、自動(dòng)捲動(dòng)功能的分頁(yè)系統(tǒng)，並確保使用者互動(dòng)會(huì)暫停和恢復(fù)自動(dòng)滾動(dòng)功能。

使用這些元件，您可以擴(kuò)展輪播以包含其他功能，例如動(dòng)態(tài)內(nèi)容、可點(diǎn)擊項(xiàng)目和更複雜的動(dòng)畫。 React Native 與 Reanimated 的靈活性允許以最低的性能成本實(shí)現(xiàn)高度可自訂的輪播，這對(duì)於創(chuàng)建具有視覺吸引力的行動(dòng)應(yīng)用程式非常有用。

請(qǐng)隨意在您的專案中嘗試這一點(diǎn)，並自訂樣式和行為以滿足您的設(shè)計(jì)需求！

以上是使用 Reanimated 在 React Native 中建立具有自動(dòng)滾動(dòng)、無限循環(huán)、分頁(yè)功能的可自訂輪播的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！

本網(wǎng)站聲明

本文內(nèi)容由網(wǎng)友自願(yuàn)投稿，版權(quán)歸原作者所有。本站不承擔(dān)相應(yīng)的法律責(zé)任。如發(fā)現(xiàn)涉嫌抄襲或侵權(quán)的內(nèi)容，請(qǐng)聯(lián)絡(luò)admin@php.cn