初学:react-native 轮播图
参考资料: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 轮播图的更多相关文章
- React Native学习(六)—— 轮播图
本文基于React Native 0.52 Demo上传到Git了,有需要可以看看,写了新内容会上传的.Git地址 https://github.com/gingerJY/React-Native-D ...
- React Native 如何做轮播图 react-native-swiper
//:仿饿了么github:https://github.com/stoneWeb/elm-react-native 欢迎各位同学加入: React-Native群:397885169 大前端群:54 ...
- React Native 之轮播图swiper组件
注释:swiper组件是第三方组件 所以在使用之前应该先在命令行安装,然后将第三方的模块引入(第三方模块地址:https://github.com/leecade/react-native-swipe ...
- React Native布局实践:开发京东client首页(三)——轮播图的实现
上篇文章中,我们一起构建了京东client的TabBar.在本文中.将继续向大家介绍京东client首页轮播图及其下发功能button的开发方法,如今就让我们開始吧! 1.相关控件调研 眼下在Gith ...
- React视角下的轮播图
天猫购物网站最显眼的就是轮播图了.我在学习一样新js库,一个新框架或新的编程思想的时候,总是感叹"入门必做选项卡,进阶须撸轮播图."作为一个React组件,它是状态操控行为的典型, ...
- React中使用CSSTransitionGroup插件实现轮播图
动画效果,是一个页面上必不可少的功能,学习一个新的东西,当然就要学习,如何用新的东西,用它的方法去实现以前的东西啦.今天呢,我就在这里介绍一个试用react-addons-css-transition ...
- React 轮播图实现
接到项目, 用react和material-ui实现轮播图. 搜索了一些方法参考, 不论语言/框架的使用,大体上分为两种思路 超宽列表实现法 在原生JS或者JQuery中,轮播图的实现一般是这样子的 ...
- reactjs-swiper react轮播图组件基于swiper
react轮播图组件基于swiper demo地址:http://reactjs-ui.github.io/reactjs-swiper/simple.html 1. 下载安装 npm install ...
- react轮播图----react-slick
1.安装 npm install react-slick; //安装样式 npm install slick carousel; 再在App.css中引入 @import "~slick-c ...
随机推荐
- 「模拟赛20181025」御风剑术 博弈论+DP简单优化
题目描述 Yasuo 和Riven对一排\(n\)个假人开始练习.斩杀第\(i\)个假人会得到\(c_i\)个精粹.双方轮流出招,他们在练习中互相学习,所以他们的剑术越来越强.基于对方上一次斩杀的假人 ...
- [USACO09FEB]改造路Revamping Trails 分层最短路 Dijkstra BZOJ 1579
题意翻译 约翰一共有N)个牧场.由M条布满尘埃的小径连接.小径可 以双向通行.每天早上约翰从牧场1出发到牧场N去给奶牛检查身体. 通过每条小径都需要消耗一定的时间.约翰打算升级其中K条小径,使之成为高 ...
- tomcat使用不同的jdk版本 liunx 装两个jdk
原作者文章 https://blog.csdn.net/qq_34626097/article/details/83385219 看了原作者学会的!上面链接 因为公司的服务器里面是jdk1.7和tom ...
- C语言ctype.h字符函数和字符串
ctype.h存的是与字符相关的函数: 这些函数虽然不能处理整个字符串,但是可以处理字符串中的字符: ToUpper()函数,利用toupper()函数处理字符串中的每个字符,转换成大写: Punct ...
- 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 ...
- Python IDLE快捷键汇总
Python IDLE快捷键汇总 在Options→configure IDLE→keys,查看现存的快捷键,也可以配置选择快捷 编辑状态时: Ctrl+Shift+space(默认与输入法冲突,修改 ...
- my30_表碎片整理
确认表的类型与存储引擎,是否全部是innodb select TABLE_SCHEMA,TABLE_NAME,TABLE_TYPE,ENGINE,VERSION,ROW_FORMAT,TABLE_RO ...
- 转 Python3 错误和异常/ Python学习之错误调试和测试
########sample 0 https://www.cnblogs.com/Simon-xm/p/4073028.html except: #捕获所有异常 except: <异常名> ...
- 前端技巧-w3c
1.使用全等===比较符 if (zeroAsAString === 0) { // 判断为false }在和null进行比较的时候,允许使用 == 比较符 2.使用 .parseInt() 的时候, ...
- pl/sql 如何配置连接远程一个或多个数据库
参考链接 https://blog.csdn.net/yy_love_my/article/details/45720277