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 相关文章推荐
基于jQuery实现的水平和垂直居中的div窗口
Aug 08 Javascript
一个Action如何调用两个不同的方法
May 22 Javascript
js实现简洁的滑动门菜单(选项卡)效果代码
Sep 04 Javascript
原生js仿jquery animate动画效果
Jul 13 Javascript
AngularJS 指令的交互详解及实例代码
Sep 14 Javascript
canvas实现手机端用来上传用户头像的代码
Oct 20 Javascript
原生JS+HTML5实现的可调节写字板功能示例
Aug 30 Javascript
jQuery使用each遍历循环的方法
Sep 19 jQuery
如何使用pm2快速将项目部署到远程服务器
Mar 12 Javascript
jquery 键盘事件 keypress() keydown() keyup()用法总结
Oct 23 jQuery
原生JavaScript之es6中Class的用法分析
Feb 23 Javascript
Vue自定义铃声提示音组件的实现
Jan 22 Vue.js
在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数组函数序列之array_unshift() 在数组开头插入一个或多个元素
2011/11/07 PHP
ThinkPHP之N方法实例详解
2014/06/20 PHP
YII路径的用法总结
2014/07/09 PHP
PHP闭包定义与使用简单示例
2018/04/13 PHP
Javascript String对象扩展HTML编码和解码的方法
2009/06/02 Javascript
一个基于jquery的图片切换效果
2010/07/06 Javascript
javascript页面渲染速度测试脚本分享
2014/04/15 Javascript
Node.js 制作实时多人游戏框架
2015/01/08 Javascript
jquery使整个div区域可以点击的方法
2015/06/24 Javascript
js事件冒泡、事件捕获和阻止默认事件详解
2016/08/04 Javascript
AngularGauge 属性解析详解
2016/09/06 Javascript
利用VUE框架,实现列表分页功能示例代码
2017/01/12 Javascript
jQuery实现鼠标经过显示动画边框特效
2017/03/24 jQuery
JavaScript使用闭包模仿块级作用域操作示例
2019/01/21 Javascript
Django 跨域请求处理的示例代码
2018/05/02 Python
Django后台获取前端post上传的文件方法
2018/05/28 Python
Python之list对应元素求和的方法
2018/06/28 Python
详解python多线程之间的同步(一)
2019/04/03 Python
Django 中自定义 Admin 样式与功能的实现方法
2019/07/04 Python
py-charm延长试用期限实例
2019/12/22 Python
Windows下Pycharm远程连接虚拟机中Centos下的Python环境(图文教程详解)
2020/03/19 Python
Python爬虫使用bs4方法实现数据解析
2020/08/25 Python
详解python tkinter包获取本地绝对路径(以获取图片并展示)
2020/09/04 Python
python中time包实例详解
2021/02/02 Python
详解CSS3中的box-sizing(content-box与border-box)
2019/04/19 HTML / CSS
美国最大的珠宝商之一:Littman Jewelers
2016/11/13 全球购物
Manduka官网:瑜伽垫、瑜伽毛巾和服装
2018/07/02 全球购物
最好的商品表达自己:Cafepress
2019/09/04 全球购物
Android面试宝典
2013/08/06 面试题
南京某软件公司的.net面试题
2015/11/30 面试题
大学生个人推荐信范文
2013/11/25 职场文书
模范家庭事迹材料
2014/02/10 职场文书
公司催款律师函
2015/05/27 职场文书
幼儿园小班开学寄语
2015/05/27 职场文书
简单且有用的Python数据分析和机器学习代码
2021/07/02 Python
Windows Server 版本 20H2 于 8 月 9 日停止支持,Win10 版本 21H1 将于 12 月结束支
2022/07/23 数码科技