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实现form表单reset按钮重置清空表单功能
Dec 18 Javascript
输入框过滤非数字的js代码
Sep 18 Javascript
Javascript模块化编程详解
Dec 01 Javascript
jQuery+html5实现div弹出层并遮罩背景
Apr 15 Javascript
Javascript函数式编程简单介绍
Oct 11 Javascript
实例详解jQuery结合GridView控件的使用方法
Jan 04 Javascript
如何利用模板将HTML从JavaScript中抽离
Oct 08 Javascript
C#微信小程序服务端获取用户解密信息实例代码
Mar 10 Javascript
详解如何在vue中使用sass
Jun 21 Javascript
React进阶学习之组件的解耦之道
Aug 07 Javascript
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
Sep 20 jQuery
mongoose更新对象的两种方法示例比较
Dec 19 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 程式大小
2006/12/06 PHP
黑夜路人出的几道php笔试题
2009/08/04 PHP
php实现用已经过去多长时间的方式显示时间
2015/06/05 PHP
php精确的统计在线人数的方法
2015/10/21 PHP
Cookie 注入是怎样产生的
2009/04/08 Javascript
jquery插件珍藏(图片局部放大/信息提示框)
2013/01/08 Javascript
实例详解jQuery的无new构建
2016/08/02 Javascript
JS实现多级菜单中当前菜单不随页面跳转样式而发生变化
2017/05/30 Javascript
基于vue-upload-component封装一个图片上传组件的示例
2018/10/16 Javascript
微信小程序地图绘制线段并且测量(实例代码)
2020/01/02 Javascript
[08:08]DOTA2-DPC中国联赛2月28日Recap集锦
2021/03/11 DOTA
Python 元类使用说明
2009/12/18 Python
Python中类的定义、继承及使用对象实例详解
2015/04/30 Python
详解Python pygame安装过程笔记
2017/06/05 Python
windows下添加Python环境变量的方法汇总
2018/05/14 Python
Python 3.3实现计算两个日期间隔秒数/天数的方法示例
2019/01/07 Python
Python实现的列表排序、反转操作示例
2019/03/13 Python
Django REST framework内置路由用法
2019/07/26 Python
余弦相似性计算及python代码实现过程解析
2019/09/18 Python
QML使用Python的函数过程解析
2019/09/26 Python
基于pygame实现童年掌机打砖块游戏
2020/02/25 Python
Python3交互式shell ipython3安装及使用详解
2020/07/11 Python
用python制作个音乐下载器
2021/01/30 Python
Python datetime模块的使用示例
2021/02/02 Python
python实现录制全屏和选择区域录屏功能
2021/02/05 Python
css3 伪类选择器快速复习小结
2019/09/10 HTML / CSS
美国鲜花递送:UrbanStems
2021/01/04 全球购物
俄罗斯达美乐比萨外送服务:Domino’s Pizza
2020/12/18 全球购物
英语专业毕业生自荐信范文
2013/12/31 职场文书
社会保险接收函
2014/01/12 职场文书
护士上岗前培训自我鉴定
2014/04/20 职场文书
安全标语大全
2014/06/10 职场文书
领导干部群众路线教育实践活动剖析材料
2014/10/10 职场文书
2016年小学生清明节广播稿
2015/12/17 职场文书
GitHub上77.9K的Axios项目有哪些值得借鉴的地方详析
2021/06/15 Javascript
Python使用MapReduce进行简单的销售统计
2022/04/22 Python