参考资料:http://reactscript.com/react-native-card-carousel-component/

import React, {Component} from 'react';
import {
StyleSheet,
Text,
Image,
View
} from 'react-native';
import CarouselCard from '../carouselCard/Card';
import Carousel, {Pagination} from 'react-native-snap-carousel';

// ES6生成组件 (推荐)
export default class MyCarouselCard extends React.Component {
constructor(props) {
super(props);
this.state = {
itemArr: [
require('../images/sowingone.png'),
require('../images/sowingtwo.png'),
require('../images/sowingthree.png')
]

}
}
_renderItem({item, index}) {
return <MySlideComponent data={item}/>
}
get pagination() {
const {itemArr, activeSlide} = this.state;
return (
<Pagination
dotsLength={this.state.itemArr.length}
activeDotIndex={activeSlide}
containerStyle={{backgroundColor: 'rgba(0, 0, 0, 0.75)'}}
dotStyle={{
width: 30,
height: 30,
borderRadius: 10,
marginHorizontal: 8,
backgroundColor: 'red'
}}
inactiveDotStyle={{
width: 30,
height: 30,
borderRadius: 10,
marginHorizontal: 8,
backgroundColor: '#000'
}}
inactiveDotOpacity={0.4}
inactiveDotScale={0.6}
/>
);
}
render() {
return (
<View style={styles.cont}>
<View style={styles.container}>
<CarouselCard
width={596}
height={403}
backgroundColor='red'
autoplay
interval={4000}
data={this.state.itemArr}
onPress={item => {
}}
contentRender={item => <Image source={item} style={{width: 596, height: 403}}/> }
/>
</View>
<View style={styles.cont1}>
<Carousel
itemWidth={500}
itemHeight={300}
windowSize={10}
data={this.state.itemArr}
renderItem={this._renderItem}
onSnapToItem={(item) => this.setState({activeSlide: item})}
/>
{this.pagination}
</View>
</View>

)
}
}

const styles = StyleSheet.create({
container: {
flex:4,
width:980,
height:450,
backgroundColor: 'blue'
},
cont: {
flex:1,
flexDirection:"column",
width: 1000,
height:550,
borderWidth: 2
},
cont1: {
flex:1
},
item: {
width: 700,
height: 100
}
});

初学:react-native 轮播图的更多相关文章

  1. React Native学习(六)—— 轮播图

    本文基于React Native 0.52 Demo上传到Git了,有需要可以看看,写了新内容会上传的.Git地址 https://github.com/gingerJY/React-Native-D ...

  2. React Native 如何做轮播图 react-native-swiper

    //:仿饿了么github:https://github.com/stoneWeb/elm-react-native 欢迎各位同学加入: React-Native群:397885169 大前端群:54 ...

  3. React Native 之轮播图swiper组件

    注释:swiper组件是第三方组件 所以在使用之前应该先在命令行安装,然后将第三方的模块引入(第三方模块地址:https://github.com/leecade/react-native-swipe ...

  4. React Native布局实践:开发京东client首页(三)——轮播图的实现

    上篇文章中,我们一起构建了京东client的TabBar.在本文中.将继续向大家介绍京东client首页轮播图及其下发功能button的开发方法,如今就让我们開始吧! 1.相关控件调研 眼下在Gith ...

  5. React视角下的轮播图

    天猫购物网站最显眼的就是轮播图了.我在学习一样新js库,一个新框架或新的编程思想的时候,总是感叹"入门必做选项卡,进阶须撸轮播图."作为一个React组件,它是状态操控行为的典型, ...

  6. React中使用CSSTransitionGroup插件实现轮播图

    动画效果,是一个页面上必不可少的功能,学习一个新的东西,当然就要学习,如何用新的东西,用它的方法去实现以前的东西啦.今天呢,我就在这里介绍一个试用react-addons-css-transition ...

  7. React 轮播图实现

    接到项目, 用react和material-ui实现轮播图. 搜索了一些方法参考, 不论语言/框架的使用,大体上分为两种思路 超宽列表实现法 在原生JS或者JQuery中,轮播图的实现一般是这样子的 ...

  8. reactjs-swiper react轮播图组件基于swiper

    react轮播图组件基于swiper demo地址:http://reactjs-ui.github.io/reactjs-swiper/simple.html 1. 下载安装 npm install ...

  9. react轮播图----react-slick

    1.安装 npm install react-slick; //安装样式 npm install slick carousel; 再在App.css中引入 @import "~slick-c ...

随机推荐

  1. 文件上传之form表单篇

    form表单上传文件 作为本系列的最后一篇,也是楼主知道的第三种文件上传的方式--隆重推出Form表单 这是最传统的上传文件,提交数据的方式 Html: <form action="/ ...

  2. SSKeychain的使用 钥匙串

    一.首先要理解keychain与userdefaults的区别: 1.keychain是将数据加密后存储在本地,更安全.路径:Library/Application Support/iPhone Si ...

  3. 【2014年百度之星资格赛1001】Energy Conversion

    Problem Description 魔法师百小度也有遇到难题的时候—— 现在,百小度正在一个古老的石门面前,石门上有一段古老的魔法文字,读懂这种魔法文字需要耗费大量的能量和大量的脑力. 过了许久, ...

  4. UESTC 1437

    LCA模板题 随便找的倍增模板... #include<bits/stdc++.h> using namespace std; const int maxn = 1e5+11; int t ...

  5. LeeCode(No2 - Add Two Numbers)

    LeeCode是一个有意思的编程网站,主要考察程序员的算法 第二题: You are given two non-empty linked lists representing two non-neg ...

  6. 阿里Java开发规约插件使用

    刚刚的云栖大会上,阿里巴巴公布了这款酝酿已久的Java开发规约插件,对于国内开发者来说是一次轻松提高自己代码规范的机会. 安装方法 IDEA安装方法: settings >> plugin ...

  7. equals和== 区别

    转载:https://zhidao.baidu.com/question/61622858.html ==是一个比较运算符,基本数据类型比较的是值,引用数据类型比较的是地址值. (比较地址值即是指是否 ...

  8. JOIN 和 NULL

    NULL值得数据出现在数据库发展的最初阶段的确给开发和使用者带来了很大的便利,这是因为它为我们节省了太多的磁盘空间,而且在那个年代磁盘是相当昂贵的.但是随着科技的发展,硬件系统的改进突飞猛进,NULL ...

  9. JavaWeb xss攻击

    出处: http://www.cnblogs.com/TankXiao/archive/2012/03/21/2337194.html XSS 全称(Cross Site Scripting) 跨站脚 ...

  10. Windows屏幕模糊,图片打开慢等解决方案

    百度经验