RN的轮播图组件

自行安装

js 复制代码
yarn add react-native-swiper

示例代码

js 复制代码
import React, {useRef, useEffect} from 'react';
import {View, Text} from 'react-native';
import Swiper from 'react-native-swiper';

const MySwiper = () => {

  return (
    <Swiper autoplay={true}>
      {/* 设置 autoplay 为 false,关闭自动播放 */}
      <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
        <Text>Slide 1</Text>
      </View>
      <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
        <Text>Slide 2</Text>
      </View>
      <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
        <Text>Slide 3</Text>
      </View>
    </Swiper>
  );
};

export default MySwiper;

效果图

相关推荐
Lear20 小时前
UniApp PDF文件下载与预览功能完整实现指南
前端
Heo20 小时前
关于XSS和CSRF,面试官更喜欢这样的回答!
前端·javascript·面试
7***A44320 小时前
Vue自然语言处理应用
前端·vue.js·自然语言处理
高阳言编程20 小时前
vue2 + node + express + MySQL 5.7 的购物系统
前端
y***548821 小时前
React依赖
前端·react.js·前端框架
2***B44921 小时前
React测试
前端·react.js·前端框架
5***o50021 小时前
React自动化测试
前端·react.js·前端框架
T***u33321 小时前
React部署
前端·react.js·前端框架
Jing_Rainbow21 小时前
【AI-7 全栈-2 /Lesson16(2025-11-01)】构建一个基于 AIGC 的 Logo 生成 Bot:从前端到后端的完整技术指南 🎨
前端·人工智能·后端
神秘的猪头21 小时前
🧱 深入理解栈(Stack):原理、实现与实战应用
前端·javascript·面试