这次给大家带来在项目中如何应用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动态传参如何处理
如何操作nodejs对密码进行加密
以上就是在项目中如何应用swiper的详细内容。