React-Native学习--轮播图第三方组件-react-native-swiper
2016-09-29 15:32
741 查看
一.通过npm安装react-native-swiper
二.在项目中导入
三.使用
四.相关属性说明
$ npm install react-native-swiper --save $ npm i react-timer-mixin --save
二.在项目中导入
import Swiper from 'react-native-swiper';
三.使用
render(){ return( <View> <Swiper height={200} loop={true} // showsButtons={true} index={0} autoplay={true} horizontal={false} > {this.renderImg()} //轮播图的元素可以是任意空间 这里添加一组图片+文字(Text)会依次显示<span style="white-space:pre"> </span> </Swiper> </View> ); }
renderImg(){ var imageViews=[]; for(var i=0;i<images.length;i++){ imageViews.push( <Image key={i} style={{flex:1}} source={{uri:images[i]}} /> ); } imageViews.push(<Text>lalala</Text>); return imageViews; }
四.相关属性说明
1.Basic
Prop | Default | Type | Description |
---|---|---|---|
horizontal | true | bool | 如果值为true时,那么滚动的内容将是横向排列的,而不是垂直于列中的。 |
loop | true | bool | 如果设置为false,那么滑动到最后一张时,再次滑动将不会展示第一张图片。 |
index | 0 | number | 初始进入的页面标识为0的页面。 |
showsButtons | false | bool | 如果设置为true,那么就可以使控制按钮(即:左右两侧的箭头)可见。 |
autoplay | false | bool | 设置为true,则页面可以自动跳转。 |
2.Custom basic style & content
Prop | Default | Type | Description |
---|---|---|---|
width | - | number | 如果你没有特殊的设置,就通过flex:1默认为全屏。 |
height | - | number | 如果你没有特殊的设置,就通过flex:1默认为全屏。 |
style | {...} | style | 设置页面的样式。 |
3.Pagination
Prop | Default | Type | Description |
---|---|---|---|
showsPagination | true | bool | 默认值为true,在页面下边显示圆点,以标明当前页面位于第几个。 |
paginationStyle | {...} | style | 设置页面原点的样式,自定义的样式会和默认样式进行合并。 |
renderPagination | |||
dot | <View style={{backgroundColor:'rgba(0,0,0,.2)', width: 8, height: 8,borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3,}} /> | element | 可以自定义不是当前圆点的样式 |
activeDot | <View style={{backgroundColor: '#007aff', width: 8, height: 8, borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3,}} /> | element | 可以自定义当前页面圆点的样式 |
4.Autoplay
Prop | Default | Type | Description |
---|---|---|---|
autoplay | true | bool | 设置为true可以使页面自动滑动。 |
autoplayTimeout | 2.5 | number | 设置每个页面自动滑动停留的时间 |
autoplayDirection | true | bool | 圆点的方向允许默认自己控制 |
5.Control buttons
Prop | Default | Type | Description |
---|---|---|---|
showsButtons | true | bool | 是否显示控制箭头按钮 |
buttonWrapperStyle | {position: 'absolute', paddingHorizontal: 15, paddingVertical: 30, top: 70, left: 0, alignItems:'flex-start'} | style | 定义默认箭头按钮的样式 |
nextButton | <Text style={{fontSize:60, color:'#00a7ec', paddingTop:30, paddingBottom:30}}>‹</Text> | element | 自定义右箭头按钮样式 |
prevButton | <Text style={{fontSize:60, color:'#00a7ec', paddingTop:30, paddingBottom:30}}>›</Text> | element | 自定义左箭头按钮样式 |
相关文章推荐
- React-Native学习--轮播图第三方组件-react-native-swiper
- ReactNative学习-滑动查看图片第三方组件react-native-swiper
- React Native学习-调取摄像头第三方组件:react-native-image-picker
- React-Native学习之第三方开源组件--侧滑栏----react-native-side-menu
- React Native学习-控制横竖屏第三方组件:react-native-orientation
- ReactNative学习实例(八) 第三方组件TabNavigator底部导航栏
- React-Native学习之第三方开源组件--侧滑栏----react-native-side-menu
- React Native学习-控制横竖屏第三方组件:react-native-orientation
- React Native 学习四 第三方组件
- 将第三方组件react-native-swiper应用在欢迎界面中
- React Native学习-控制横竖屏第三方组件:react-native-orientation
- react-native开源组件react-native-wechat学习
- 【React Native 安卓开发】----第三方框架的引用之React-native-Swiper框架实现欢迎页【第五篇】
- React-Native学习十九:组件之间的通信-1
- React Native学习笔记之--组件之间数据的传递和跳转
- React-Native-swiper React Native 轮播类组件
- react native组件学习(四)
- React Native 学习之Image组件
- React Native 项目常用第三方组件汇总
- react native组件学习(三)