参考资料: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. 「模拟赛20181025」御风剑术 博弈论+DP简单优化

    题目描述 Yasuo 和Riven对一排\(n\)个假人开始练习.斩杀第\(i\)个假人会得到\(c_i\)个精粹.双方轮流出招,他们在练习中互相学习,所以他们的剑术越来越强.基于对方上一次斩杀的假人 ...

  2. [USACO09FEB]改造路Revamping Trails 分层最短路 Dijkstra BZOJ 1579

    题意翻译 约翰一共有N)个牧场.由M条布满尘埃的小径连接.小径可 以双向通行.每天早上约翰从牧场1出发到牧场N去给奶牛检查身体. 通过每条小径都需要消耗一定的时间.约翰打算升级其中K条小径,使之成为高 ...

  3. tomcat使用不同的jdk版本 liunx 装两个jdk

    原作者文章 https://blog.csdn.net/qq_34626097/article/details/83385219 看了原作者学会的!上面链接 因为公司的服务器里面是jdk1.7和tom ...

  4. C语言ctype.h字符函数和字符串

    ctype.h存的是与字符相关的函数: 这些函数虽然不能处理整个字符串,但是可以处理字符串中的字符: ToUpper()函数,利用toupper()函数处理字符串中的每个字符,转换成大写: Punct ...

  5. Codeforces-C-Grid game(思维)

    You are given a 4x4 grid. You play a game - there is a sequence of tiles, each of them is either 2x1 ...

  6. Python IDLE快捷键汇总

    Python IDLE快捷键汇总 在Options→configure IDLE→keys,查看现存的快捷键,也可以配置选择快捷 编辑状态时: Ctrl+Shift+space(默认与输入法冲突,修改 ...

  7. my30_表碎片整理

    确认表的类型与存储引擎,是否全部是innodb select TABLE_SCHEMA,TABLE_NAME,TABLE_TYPE,ENGINE,VERSION,ROW_FORMAT,TABLE_RO ...

  8. 转 Python3 错误和异常/ Python学习之错误调试和测试

    ########sample 0 https://www.cnblogs.com/Simon-xm/p/4073028.html except: #捕获所有异常 except: <异常名> ...

  9. 前端技巧-w3c

    1.使用全等===比较符 if (zeroAsAString === 0) { // 判断为false }在和null进行比较的时候,允许使用 == 比较符 2.使用 .parseInt() 的时候, ...

  10. pl/sql 如何配置连接远程一个或多个数据库

    参考链接 https://blog.csdn.net/yy_love_my/article/details/45720277