欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

react-native封装插件swiper的使用方法

程序员文章站 2022-09-26 11:49:51
首先创建简单的react-native项目,创建一个文件夹。然后用命令符输入 react-native init swiper 创建完成之后开发项目,我用的...

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

react-native init swiper

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

react-native封装插件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,加上说明文档

react-native封装插件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:

属性 描述 类型 默认值
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 }} />;
      }} //图片
/>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。