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 相关文章推荐
ExtJs使用总结(非常详细)
Mar 22 Javascript
js利用prototype调用Array的slice方法示例
Jun 09 Javascript
常用的Javascript数据验证插件
Aug 04 Javascript
基于JS实现bookstore静态页面的实例代码
Feb 22 Javascript
基于Bootstrap框架实现图片切换
Mar 10 Javascript
JS实现多张图片预览同步上传功能
Jun 23 Javascript
vue数据初始化initState的实例详解
Apr 11 Javascript
JS实现li标签的删除
Apr 12 Javascript
微信小程序用户授权、位置授权及获取微信绑定手机号
Jul 18 Javascript
JavaScript装饰者模式原理与用法实例详解
Mar 09 Javascript
JavaScript实现拖拽和缩放效果
Aug 24 Javascript
Javascript 解构赋值详情
Nov 17 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实现chrome表单请求数据转换为接口使用的json数据
2021/03/04 PHP
两个数组去重的JS代码
2013/12/04 Javascript
javascript结合ajax读取txt文件内容
2014/12/05 Javascript
Node.js实用代码段之获取Buffer对象字节长度
2016/03/17 Javascript
javascript执行环境及作用域详解
2016/05/05 Javascript
javascript中数组(Array)对象和字符串(String)对象的常用方法总结
2016/12/15 Javascript
基于JavaScript实现熔岩灯效果导航菜单
2017/01/04 Javascript
JavaScript实现翻页功能(附效果图)
2017/02/16 Javascript
关于Node.js中Buffer的一些你可能不知道的用法
2017/03/28 Javascript
BootStrap Table复选框默认选中功能的实现代码(从数据库获取到对应的状态进行判断是否为选中状态)
2017/07/11 Javascript
微信小程序实现多宫格抽奖活动
2020/04/15 Javascript
灵活使用console让js调试更简单的方法步骤
2019/04/23 Javascript
详解微信小程序图片地扯转base64解决方案
2019/08/18 Javascript
使用layui前端框架弹出form表单以及提交的示例
2019/10/25 Javascript
AJAX XMLHttpRequest对象创建使用详解
2020/08/20 Javascript
vue项目中使用rem,在入口文件添加内容操作
2020/11/11 Javascript
JavaScript基于SVG的图片切换效果实例代码
2020/12/15 Javascript
10种检测Python程序运行时间、CPU和内存占用的方法
2015/04/01 Python
Python读取网页内容的方法
2015/07/30 Python
Python数据结构与算法之字典树实现方法示例
2017/12/13 Python
小白入门篇使用Python搭建点击率预估模型
2018/10/12 Python
python 魔法函数实例及解析
2019/09/25 Python
HTML5不支持标签和新增标签详解
2016/06/27 HTML / CSS
草莓网中国:StrawberryNet中国
2020/08/17 全球购物
计算 s=(x*y)1/2,用两个宏定义来实现
2016/08/11 面试题
MYSQL基础面试题
2012/05/13 面试题
客户代表自我评价范例
2013/09/24 职场文书
大学班长的职责
2014/01/27 职场文书
共产党员公开承诺书范文
2014/03/28 职场文书
五四青年节优秀演讲稿范文
2014/05/28 职场文书
安全宣传标语
2014/06/10 职场文书
股东授权委托书范文
2014/09/13 职场文书
工作散漫检讨书
2014/09/16 职场文书
2015年社区民政工作总结
2015/04/21 职场文书
实习证明格式范文
2015/06/16 职场文书
带你学习MySQL执行计划
2021/05/31 MySQL