ReactNative-轮播图

ReactNative中有专门实现轮播图的模块react-native-swiper

  • 安装组件
npm i react-native-swiper --save
  • 导入组件
import Swiper from 'react-native-swiper';
  • 详细代码
import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  Image,
  View
} from 'react-native';

import Swiper from 'react-native-swiper';
import Dimensions from 'Dimensions';

// 屏幕宽度
var screenWidth = Dimensions.get('window').width;

export default class ScrollViewDemo extends Component {

  // 构造
  constructor(props){
        super(props);
        this.state = {
            isShow: false,
            items:[]
        }
    }
  render() {
        let H = 200;
        if (this.state.isShow) {
            return(
                <View style=>

                    <Swiper 
                      autoplay = {true} 
                      height = {H} 
                      showsPagination = {true} 
                      dotColor="white"
                      activeDotColor='yellow' horizontal={true}>
                        {
                            this.state.items.map((item, index) => {
                                //cover: 等比例放大; center:不变; contain:不变; stretch:填充;
                                return (<Image style= key = {index} resizeMode='cover' source={item}/>)
                            })
                        }

                    </Swiper>
                    <Text style={styles.title}>
                        滚动视图
                    </Text>
                </View>
            );
        }else {
            return(
                <View style=/>
            );
        }
    }

  componentDidMount() {
        var item;
        for (let i = 0; i < 3; i++){
            switch (i){
                case 0:{
                    item = require('./images/1.jpg');
                    break;
                }
                case 1:{
                    item = require('./images/2.jpg');
                    break;
                }
                default:{
                    item = require('./images/3.jpg');
                    break;
                }
            }
            this.state.items.push(item);

        }
        console.log(this.state.items + '111');
        this.setState({
            isShow: true,
            items: this.state.items
        })
    }
}

const styles = StyleSheet.create({
  
  title: {
    marginTop: 30,
    position: 'absolute',
    fontSize: 32, 
    backgroundColor:'transparent'
  },

});

AppRegistry.registerComponent('ScrollViewDemo', () => ScrollViewDemo);

效果图:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏非典型技术宅

iOS动画系列之三:Core Animation1. 介绍2. 支持的平台3. Core Animation 的继承结构图4. 常见属性和使用步骤

12440
来自专栏开源项目

码云推荐 | 基于 vue.js 的移动端组件库 mint-ui

升级版的mint-ui,基于vue.js,可自己拓展组件。 Installation 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使...

443100
来自专栏一“技”之长

iOS开发CoreAnimation解读之五——高级动画技巧

        CoreAnimation中还有一个非常重要的类:CATransaction事物类,这个可以同时设置多个layer层的动画效果。可以通过隐式和显...

9810
来自专栏GIS讲堂

CSS+JS实现tab标签切换

循环将所有的内容标签隐藏,并将tab标题栏的active样式清除,完了之后设置选中标签的内容显示,并给tab标题栏添加active样式。

83430
来自专栏deepcc

学习js在线html(富文本)编辑器

3.3K70
来自专栏游戏杂谈

仿Google+相册的动画

鼠标移入、移出时均有动画效果,咋一看估计是使用了css3的transform属性来实现动画效果的。

20210
来自专栏从零开始学自动化测试

appium+python自动化58-xpath定位

3.class属性唯一的话,可以通过class属性定位到,定位class属性有两种方法

30850
来自专栏林德熙的博客

win10 uwp 使用动画修改 Grid column 的宽度

今天 wurstmitbrot 问如何通过动画修改 Grid 的 column ,虽然 column 是一个依赖属性,可以绑定,但是做出动画还是比较难的。 本文...

9210
来自专栏技术墨客

React——Fragments特性 转

在我们使用React开发组件的时候,每个React组件都必须返回一个根元素。例如下面这样:

10310
来自专栏更流畅、简洁的软件开发方式

发布一个锁定行列的一种方法。(实现Excel里的冻结窗格的功能)

功能介绍:     可以实现锁定表格的行和列的功能,效果和Excel里的冻结窗格类似,当然没有Excel那么强大了,只是类似。 问题:     当一个t...

80260

扫码关注云+社区

领取腾讯云代金券