这次给大家带来封装插件swiper使用详解使用封装插件swiper的注意事项有哪些,下面就是实战案例,一起来看一下。

首先创建简单的react-native项目,创建一个文件夹。然后用命令符输入

react-native init swiper

创建完成之后开发项目,我用的vs

封装插件swiper使用详解

打开控制台,安装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,加上说明文档

封装插件swiper使用详解

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:

属性描述类型默认值

dataCarousel数据源Array-

heightCarousel的高度number150

onPressItem点击Carousel Item的时候触发fn-

renderItem具体的渲染Item的方法,请参考FlatListfn-

autoplay是否自动切换booltrue

autoplayTimeoutItem自动切换的时间间隔(单位s)number2.5

需要导入的地方

import { HigoCarousel } from '../../components'; <Carousel data={} //接受的数据 onPressItem={} //点击事件 height={} //图片高度 autoplay={} //是否自动播放 autoplayTimeout={} //过渡时间 renderItem={item => { return <Image source={{ uri: item.imageSource }} style={{ flex: 1 }} />; }} //图片 />

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!