提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  工具

当前栏目

React-Native学习--轮播图第三方组件-react-native-swiper

组件学习React -- native 第三方 轮播 swiper
2023-09-27 14:29:03 时间

一.通过npm安装React-native-swiper

[html]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. $ npm install react-native-swiper --save  
  2. $ npm i react-timer-mixin --save  


二.在项目中导入

[javascript]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. import Swiper from 'react-native-swiper';  


三.使用

[javascript]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. render(){  
  2.   return(  
  3.       <View>  
  4.         <Swiper height={200}  
  5.                 loop={true}  
  6.                 // showsButtons={true}  
  7.                 index={0}  
  8.                 autoplay={true}  
  9.                 horizontal={false}  
  10.                 >  
  11.              {this.renderImg()}  
  12. 轮播图的元素可以是任意空间 这里添加一组图片+文字(Text)会依次显示<span style="white-space:pre">    </span>  
  13.          </Swiper>  
  14.       </View>  
  15.   
  16.   );  
  17. }  


[html]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. renderImg(){  
  2.         var imageViews=[];  
  3.         for(var i=0;i<images.length;i++){  
  4.             imageViews.push(  
  5.                 <Image  
  6.                     key={i}  
  7.                     style={{flex:1}}  
  8.                     source={{uri:images[i]}}  
  9.                     />  
  10.             );  
  11.         }  
  12.         imageViews.push(<Text>lalala</Text>);  
  13.         return imageViews;  
  14.     }  



四.相关属性说明

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 自定义左箭头按钮样式

相关文章