react-native封装插件swiper的使用方法
程序员文章站
2022-09-26 11:49:51
首先创建简单的react-native项目,创建一个文件夹。然后用命令符输入
react-native init 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 }} />; }} //图片 />
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: 当心大数据时代的浮夸陷阱
下一篇: Java为何需要平衡方法调用与内联