react-native简单轮播图组件

最新推荐文章于 2024-08-18 10:25:41 发布

晨读秀秀

最新推荐文章于 2024-08-18 10:25:41 发布

阅读量1.6k

点赞数

分类专栏： js小实例练习文章标签： react-native reactnative轮播图

本文链接：https://blog.csdn.net/vayulu/article/details/88354496

版权

这篇博客详细介绍了如何在React Native中创建一个简单的轮播图组件，重点讲解了ScrollView的相关属性应用和定时器的使用技巧。

摘要由CSDN通过智能技术生成

就不多做解释了，注释写的很明白，主要是对scrollview一些属性的了解，定时器的始用

import React, {Component} from 'react';
import {Platform, StyleSheet,Image, Text, View,ScrollView} from 'react-native';
let Dimensions=require('Dimensions');
let {width}=Dimensions.get('window');
var scrollImages = [
         'https://facebook.github.io/react-native/docs/assets/favicon.png',
         'https://facebook.github.io/react-native/docs/assets/favicon.png',
];
var localImg=[
    require('./img/a1.png'),
    require('./img/a2.png'),
    require('./img/a3.png'),
    require('./img/a4.png'), 
    require('./img/a1.png'),
];
class Swiper extends Component{
    //定义默认属性duration循环时间值，默认1秒
    static defaultProps={
        duration:1000
    }
    constructor(props){
        super(props);
        //当前页数
        this.state={
            currentPage:0
        };
      }