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如何创建表格(javascript绘制表格的二种方法)
Dec 10 Javascript
Jquery给基本控件的取值、赋值示例
May 23 Javascript
Jquery中CSS选择器用法分析
Feb 10 Javascript
AngularJS学习笔记之TodoMVC的分析
Feb 22 Javascript
jquery实现标签支持图文排列带上下箭头按钮的选项卡
Mar 14 Javascript
jQuery实现自动滚动到页面顶端的方法
May 22 Javascript
BootStrap modal模态弹窗使用小结
Oct 26 Javascript
Javascript+CSS3实现进度条效果
Oct 28 Javascript
通过AngularJS实现图片上传及缩略图展示示例
Jan 03 Javascript
详解js中==与===的区别
Jan 08 Javascript
详解微信小程序 wx.uploadFile 的编码坑
Jan 23 Javascript
快速实现jQuery多级菜单效果
Feb 01 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
ADODB结合SMARTY使用~超级强
2006/11/25 PHP
一个PHP并发访问实例代码
2012/09/06 PHP
使用Discuz关键词服务器实现PHP中文分词
2014/03/11 PHP
Yii扩展组件编写方法实例分析
2015/06/29 PHP
浅谈PHP中的那些魔术常量
2020/12/02 PHP
DOM相关内容速查手册
2007/02/07 Javascript
Extjs ajax同步请求时post方式参数发送方式
2009/08/05 Javascript
jquery判断字符输入个数(数字英文长度记为1,中文记为2,超过长度自动截取)
2010/10/15 Javascript
高效率JavaScript编写技巧整理
2013/08/23 Javascript
jQuery操作input值的各种方法总结
2013/11/21 Javascript
jquery如何实现锚点链接之间的平滑滚动
2013/12/02 Javascript
判断客户浏览器是否支持cookie的示例代码
2013/12/23 Javascript
可自定义速度的js图片无缝滚动示例分享
2014/01/20 Javascript
基于javascript实现单选及多选的向右和向左移动实例
2015/07/25 Javascript
Bootstrap每天必学之进度条
2015/11/30 Javascript
AngularJS基于ngInfiniteScroll实现下拉滚动加载的方法
2016/12/14 Javascript
JavaScript创建对象的七种方式(推荐)
2017/06/26 Javascript
JavaScript函数中的this四种绑定形式
2017/08/15 Javascript
vue .js绑定checkbox并获取、改变选中状态的实例
2018/08/24 Javascript
vue中进入详情页记住滚动位置的方法(keep-alive)
2018/09/21 Javascript
[03:22]DOTA2超级联赛专访单车:找到属于自己的英雄
2013/06/08 DOTA
[32:47]完美世界DOTA2联赛 GXR vs IO 第二场 11.07
2020/11/09 DOTA
Python实现的文本简单可逆加密算法示例
2017/05/18 Python
利用Python yagmail三行代码实现发送邮件
2018/05/11 Python
Python自动抢红包教程详解
2019/06/11 Python
Python 多个图同时在不同窗口显示的实现方法
2019/07/07 Python
Python实现一个论文下载器的过程
2021/01/18 Python
Interrail法国:乘火车探索欧洲,最受欢迎的欧洲铁路通票
2019/08/27 全球购物
DC Shoes俄罗斯官网:美国滑板鞋和服饰品牌
2020/08/19 全球购物
竞选班委演讲稿
2014/04/28 职场文书
政风行风评议整改方案
2014/09/15 职场文书
公司租房协议书
2014/10/14 职场文书
单位租房协议书样本
2014/10/30 职场文书
2015年禁毒宣传活动总结
2015/03/25 职场文书
mysql 索引合并的使用
2021/08/30 MySQL
HTML页面点击按钮关闭页面的多种方式
2022/12/24 HTML / CSS