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 相关文章推荐
解决FireFox下[使用event很麻烦]的问题
Nov 26 Javascript
js下写一个事件队列操作函数
Jul 19 Javascript
Javascript中的isNaN函数使用说明
Nov 10 Javascript
如何设置一定时间内只能发送一次请求
Feb 28 Javascript
jQuery实现平滑滚动到指定锚点的方法
Mar 20 Javascript
javascript使用输出语句实现网页特效代码
Aug 06 Javascript
jQuery实现仿微软首页感应鼠标变化滑动窗口效果
Oct 08 Javascript
全面解析Bootstrap布局组件应用
Feb 22 Javascript
浅谈jQuery效果函数
Sep 16 Javascript
AngularJS控制器之间的通信方式详解
Nov 03 Javascript
AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息)
Oct 24 Javascript
Vue中使用Sortable的示例代码
Apr 07 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边学边教》(02.Apache+PHP环境配置――上篇)
2006/12/13 PHP
PHP读取文件内容的五种方式
2015/12/28 PHP
laravel框架中间件 except 和 only 的用法示例
2019/07/12 PHP
页面只有一个text的时候,回车自动submit的解决方法
2010/08/12 Javascript
JQuery+JS实现仿百度搜索结果中关键字变色效果
2011/08/02 Javascript
idTabs基于JQuery的根据URL参数选择Tab插件
2012/04/11 Javascript
js使用栈来实现10进制转8进制与取除数及余数
2014/06/11 Javascript
js实现按钮控制图片360度翻转特效的方法
2015/02/17 Javascript
深入理解JavaScript系列(48):对象创建模式(下篇)
2015/03/04 Javascript
JavaScript中继承用法实例分析
2015/05/16 Javascript
基于jQuery实现淡入淡出效果轮播图
2020/07/31 Javascript
JS点击某个图标或按钮弹出文件选择框的实现代码
2016/09/27 Javascript
微信小程序 图片宽度自适应的实现
2017/04/06 Javascript
详解Vue 2.0封装axios笔记
2017/06/22 Javascript
JS获取一个表单字段中多条数据并转化为json格式
2017/10/17 Javascript
Angular4实现鼠标悬停3d倾斜效果
2017/10/25 Javascript
解决js ajax同步请求造成浏览器假死的问题
2018/01/18 Javascript
vue 设置路由的登录权限的方法
2018/07/03 Javascript
使用Vue实现图片上传的三种方式
2018/07/17 Javascript
关于js陀螺仪的理解分析
2019/04/11 Javascript
如何自定义微信小程序tabbar上边框的颜色
2019/07/09 Javascript
关于引入vue.js 文件的知识点总结
2020/01/28 Javascript
深入了解Vue.js 混入(mixins)
2020/07/23 Javascript
[01:46]辉夜杯—打造中国DOTA新格局
2015/12/25 DOTA
[53:15]2018DOTA2亚洲邀请赛3月29日 小组赛A组 LGD VS TNC
2018/03/30 DOTA
cmd运行python文件时对结果进行保存的方法
2018/05/16 Python
Python实现的json文件读取及中文乱码显示问题解决方法
2018/08/06 Python
python matplotlib画图库学习绘制常用的图
2019/03/19 Python
Python实现数据结构线性链表(单链表)算法示例
2019/05/04 Python
对python3 sort sorted 函数的应用详解
2019/06/27 Python
pycharm修改文件的默认打开方式的步骤
2019/07/29 Python
Flask缓存静态文件的具体方法
2020/08/02 Python
校本研修个人总结
2015/02/28 职场文书
jquery插件实现图片悬浮
2021/04/16 jQuery
python实现自定义日志的具体方法
2021/05/28 Python
Mysql表数据比较大情况下修改添加字段的方法实例
2022/06/28 MySQL