这次给大家带来封装插件swiper使用详解，使用封装插件swiper的注意事项有哪些，下面就是实战案例，一起来看一下。
首先创建简单的react-native项目,创建一个文件夹。然后用命令符输入
react-native init swiper
创建完成之后开发项目，我用的vs
打开控制台，安装swiper依赖。
安装：npm i react-native-swiper --save
查看：npm view react-native-swiper
删除：npm rm react-native-swiper --save
这里还需要 npm i 下更新下本地的依赖库
启动app项目
ios: react-native run-ios
android: react-native run-android
开始上码，在src里面创建个components文件夹下边创建个swiper.js文件，以及index.js,加上说明文档
import proptypes from 'prop-types';
import react, { component } from 'react';
import { stylesheet, touchablewithoutfeedback, view } from 'react-native';
import rnswiper from 'react-native-swiper';
const styles = stylesheet.create({
activedotwrapperstyle: {
//圆点样式
},
activedotstyle: {
//圆点样式
},
dotstyle: {
//圆点样式
}
});
const activedot = (
<view style={styles.activedotwrapperstyle}>
<view style={styles.activedotstyle} />
</view>
);
const dot = <view style={styles.dotstyle} />;
export class carousel extends component {
// define component prop list
static proptypes = {
data: proptypes.array,
height: proptypes.number,
onpressitem: proptypes.func,
renderitem: proptypes.func.isrequired,
autoplay: proptypes.bool,
autoplaytimeout: proptypes.number
};
// define props default value
static defaultprops = {
data: [],
height: 150,
autoplay: true,
autoplaytimeout: 2.5,
onpressitem: () => {},
renderitem: () => {}
};
// define inner state
state = {
showswiper: false
};
constructor(props) {
super(props);
this.handleitempress = this.handleitempress.bind(this);
}
componentdidmount() {
settimeout(() => {
this.setstate({ showswiper: true });
});
}
handleitempress(item) {
this.props.onpressitem(item);
}
_renderswiperitem(item, index) {
return (
<touchablewithoutfeedback key={index} onpress={() => this.handleitempress(item)}>
<view style={[{ flex: 1 }]}>{this.props.renderitem(item)}</view>
</touchablewithoutfeedback>
);
}
render() {
return this.props.data.length === 0 || !this.state.showswiper ? null : (
<rnswiper
height={this.props.height} //图片高度
activedot={activedot}
dot={dot}
style={{ backgroundcolor: '#fff' }}
autoplay={this.props.autoplay} //是否自动轮播
autoplaytimeout={this.props.autoplaytimeout} //轮播秒数
>
{this.props.data.map((item, idx) => this._renderswiperitem(item, idx))} //如果数据是个对象里面的数组加一个循环
</rnswiper>
);
}
}
这是index.js文件
import { carousel } from './carousel/carousel';
export { carousel };
公共组件库
这里用于放置与业务无关的公共组件。组件实现必须考虑灵活性，扩展性，不能包含具体的业务逻辑。
组件必须以 你做的业务命名 为前缀，如 trycarousel.js 。每个组件必须单独放在目录中，目录必须全小写（中横线分割），如 carousel/trycarousel.js 。
一个基本的组件结构：
import proptypes from 'prop-types';
import react, { component } from 'react';
export class trycarousel extends component {
// define component prop list
static proptypes = {};
// define props default value
static defaultprops = {};
// define inner state
state = {};
constructor(props) {
super(props);
}
// lifecycle hooks
// prototype functions
// ensure the latest function is render
render() {}
}
组件列表
carousel（轮播组件）
主要用于通用的图片轮播，能够提供点击事件响应。
usage:
props:
属性描述类型默认值
data carousel数据源 array -
height carousel的高度 number 150
onpressitem 点击carousel item的时候触发 fn -
renderitem 具体的渲染item的方法，请参考flatlist fn -
autoplay 是否自动切换 bool true
autoplaytimeout item自动切换的时间间隔（单位s） number 2.5
需要导入的地方
import { higocarousel } from '../../components';
<carousel
data={} //接受的数据
onpressitem={} //点击事件
height={} //图片高度
autoplay={} //是否自动播放
autoplaytimeout={} //过渡时间
renderitem={item => {
return <image source={{ uri: item.imagesource }} style={{ flex: 1 }} />;
}} //图片
/>
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
如何实现vue-router中query动态传参
为什么不能用ip访问webpack本地开发环境
nodejs对密码加密处理方法总结
以上就是封装插件swiper使用详解的详细内容。