当前位置：首页 > React

react native实现轮播

2026-01-26 22:53:47React

使用 react-native-snap-carousel 实现轮播

安装依赖库

npm install react-native-snap-carousel @snap-carousel/react-native-snap-carousel

基础实现代码

import React from 'react';
import { View, Text, Dimensions } from 'react-native';
import Carousel from 'react-native-snap-carousel';

const { width: screenWidth } = Dimensions.get('window');

const data = [
  { title: 'Item 1' },
  { title: 'Item 2' },
  { title: 'Item 3' },
];

const renderItem = ({ item }) => (
  <View style={{ width: screenWidth - 60, height: 200, backgroundColor: 'lightgray' }}>
    <Text>{item.title}</Text>
  </View>
);

const App = () => {
  return (
    <Carousel
      data={data}
      renderItem={renderItem}
      sliderWidth={screenWidth}
      itemWidth={screenWidth - 60}
    />
  );
};

export default App;

使用 react-native-swiper 实现轮播

安装依赖库

npm install react-native-swiper

基础实现代码

import React from 'react';
import { View, Text } from 'react-native';
import Swiper from 'react-native-swiper';

const App = () => {
  return (
    <Swiper showsButtons={true}>
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#9DD6EB' }}>
        <Text>Slide 1</Text>
      </View>
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#97CAE5' }}>
        <Text>Slide 2</Text>
      </View>
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#92BBD9' }}>
        <Text>Slide 3</Text>
      </View>
    </Swiper>
  );
};

export default App;

自定义实现轮播组件

使用 ScrollView 和定时器实现基本轮播功能

import React, { useState, useRef, useEffect } from 'react';
import { View, Text, ScrollView, Dimensions, StyleSheet } from 'react-native';

const { width } = Dimensions.get('window');

const CustomCarousel = () => {
  const [currentIndex, setCurrentIndex] = useState(0);
  const scrollViewRef = useRef(null);
  const data = ['Slide 1', 'Slide 2', 'Slide 3'];

  useEffect(() => {
    const timer = setInterval(() => {
      const newIndex = (currentIndex + 1) % data.length;
      setCurrentIndex(newIndex);
      scrollViewRef.current.scrollTo({ x: newIndex * width, animated: true });
    }, 3000);
    return () => clearInterval(timer);
  }, [currentIndex]);

  return (
    <View style={styles.container}>
      <ScrollView
        ref={scrollViewRef}
        horizontal
        pagingEnabled
        showsHorizontalScrollIndicator={false}
      >
        {data.map((item, index) => (
          <View key={index} style={styles.slide}>
            <Text>{item}</Text>
          </View>
        ))}
      </ScrollView>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    height: 200,
  },
  slide: {
    width: width,
    height: 200,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: index % 2 === 0 ? '#9DD6EB' : '#97CAE5',
  },
});

export default CustomCarousel;

轮播功能优化建议

添加分页指示器

const Pagination = ({ data, currentIndex }) => (
  <View style={{ flexDirection: 'row', justifyContent: 'center' }}>
    {data.map((_, index) => (
      <View
        key={index}
        style={{
          width: 8,
          height: 8,
          borderRadius: 4,
          backgroundColor: index === currentIndex ? 'black' : 'gray',
          margin: 4,
        }}
      />
    ))}
  </View>
);

支持自动播放和手动滑动

// 在自定义轮播组件中添加以下状态
const [autoPlay, setAutoPlay] = useState(true);

// 在ScrollView中添加以下事件处理
onScrollBeginDrag={() => setAutoPlay(false)}
onScrollEndDrag={() => setAutoPlay(true)}

react native实现轮播