这次给大家带来封装插件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 = ( );const dot = ;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 ( this.handleItemPress(item)}> {this.props.renderItem(item)} ); } render() { return this.props.data.length === 0 || !this.state.showSwiper ? null : ( {this.props.data.map((item, idx) => this._renderSwiperItem(item, idx))} //如果数据是个对象里面的数组加一个循环 ); }}
登录后复制
这是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:
属性 描述 类型 默认值dataCarousel数据源Array-heightCarousel的高度number150onPressItem点击Carousel Item的时候触发fn-renderItem具体的渲染Item的方法，请参考FlatListfn-autoplay是否自动切换booltrueautoplayTimeoutItem自动切换的时间间隔（单位s）number2.5
需要导入的地方
import { HigoCarousel } from '../../components'; { return ; }} //图片/>
登录后复制
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
如何实现vue-router中query动态传参
为什么不能用ip访问webpack本地开发环境
nodejs对密码加密处理方法总结
以上就是封装插件swiper使用详解的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2764522.html
