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;

效果图

相关推荐
开发者小天6 分钟前
React中使用useParams
前端·javascript·react.js
lichong95114 分钟前
Android studio release 包打包配置 build.gradle
android·前端·ide·flutter·android studio·大前端·大前端++
nvvas28 分钟前
npm : 无法加载文件 D:\nvm\nodejs\npm.ps1,因为在此系统上禁止运行脚本问题解决
前端·npm·node.js
拉不动的猪1 小时前
浏览器之内置四大多线程API
前端·javascript·浏览器
林太白1 小时前
5大排序算法&2大搜索&4大算法思想
前端
摇滚侠1 小时前
浏览器的打印功能,如果通过HTML5,控制样式
前端·html·html5
喵喵侠w1 小时前
uni-app微信小程序相机组件二次拍照白屏问题的排查与解决
前端·数码相机·微信小程序·小程序·uni-app
超大只番薯1 小时前
在Next.js中实现页面级别KeepAlive
前端
快递鸟1 小时前
第三方物流接口优选:快递鸟物流 API,打破单一快递对接壁垒
前端
Mapmost2 小时前
【高斯泼溅】从一张好照片开始:Mapmost 3DGS建模之图像采集指南
前端