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


Posted in Javascript onMarch 20, 2018

首先创建简单的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 }} />;
      }} //图片
/>

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

Javascript 相关文章推荐
javascript实现3D变换的立体圆圈实例
Aug 06 Javascript
js带缩略图的图片轮播效果代码分享
Sep 14 Javascript
详解JavaScript基于面向对象之继承
Dec 13 Javascript
Javascript复制实例详解
Jan 28 Javascript
基于Bootstrap里面的Button dropdown打造自定义select
May 30 Javascript
Ext JS框架程序中阻止键盘触发回退或者刷新页面的代码分享
Jun 07 Javascript
jquery 标签 隔若干行加空白或者加虚线的方法
Dec 07 Javascript
微信小程序 解决请求服务器手机预览请求不到数据的方法
Jan 04 Javascript
WebPack基础知识详解
Jan 16 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图和饼图的组合图效果示例【附demo源码下载】
Mar 09 Javascript
JavaScript编写一个贪吃蛇游戏
Mar 09 Javascript
Vue服务端渲染和Vue浏览器端渲染的性能对比(实例PK )
Mar 31 Javascript
在vue项目中使用sass的配置方法
Mar 20 #Javascript
webpack vue项目开发环境局域网访问方法
Mar 20 #Javascript
动态加载、移除js/css文件的示例代码
Mar 20 #Javascript
webpack 打包压缩js和css的方法示例
Mar 20 #Javascript
浅谈Node 调试工具入门教程
Mar 20 #Javascript
使用Vue.js开发微信小程序开源框架mpvue解析
Mar 20 #Javascript
浅谈jquery fullpage 插件增加头部和版权的方法
Mar 20 #jQuery
You might like
生成卡号php代码
2008/04/09 PHP
php求正负数数组中连续元素最大值示例
2014/04/11 PHP
php+mysqli预处理技术实现添加、修改及删除多条数据的方法
2015/01/30 PHP
php封装好的人民币数值转中文大写类
2015/12/20 PHP
PHP上传图片、删除图片简单实例
2016/11/12 PHP
javascript 有趣而诡异的数组
2009/04/06 Javascript
JavaScript 类的定义和引用 JavaScript高级培训 自定义对象
2010/04/27 Javascript
jquery中prop()方法和attr()方法的区别浅析
2013/09/06 Javascript
jquery实现手机发送验证码的倒计时代码
2014/02/12 Javascript
js实现点击左右按钮轮播图片效果实例
2015/01/29 Javascript
EasyUI的DataGrid绑定Json数据源的示例代码
2017/12/16 Javascript
js中bool值的转换及“&amp;&amp;”、“||”、 “!!”详解
2017/12/21 Javascript
关于express与koa的使用对比详解
2018/01/25 Javascript
如何基于javascript实现贪吃蛇游戏
2020/02/09 Javascript
[35:55]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第一场 12.11
2020/12/13 DOTA
详解Python中expandtabs()方法的使用
2015/05/18 Python
十分钟利用Python制作属于你自己的个性logo
2018/05/07 Python
Python数据分析:手把手教你用Pandas生成可视化图表的教程
2018/12/15 Python
Python中的异常处理try/except/finally/raise用法分析
2019/02/28 Python
DJANGO-URL反向解析REVERSE实例讲解
2019/10/25 Python
Pytorch 定义MyDatasets实现多通道分别输入不同数据方式
2020/01/15 Python
keras中的backend.clip用法
2020/05/22 Python
Python远程方法调用实现过程解析
2020/07/28 Python
精选干货:Java精选笔试题附答案
2014/01/18 面试题
数控专业大学毕业生职业规划范文
2014/02/06 职场文书
计划生育目标责任书
2015/05/09 职场文书
2015年计划生育协会工作总结
2015/05/13 职场文书
警示教育观后感
2015/06/17 职场文书
转学证明范本
2015/06/19 职场文书
新学期感想
2015/08/10 职场文书
学校远程教育工作总结
2015/08/11 职场文书
只用50行Python代码爬取网络美女高清图片
2021/06/02 Python
一文搞懂python异常处理、模块与包
2021/06/26 Python
Java常用函数式接口总结
2021/06/29 Java/Android
Redis字典实现、Hash键冲突及渐进式rehash详解
2021/09/04 Redis
【TED出品】天梯非主流开心游1700 划水骑士
2022/03/31 魔兽争霸