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 相关文章推荐
Code: write(s,d) 输出连续字符串
Aug 19 Javascript
奇妙的js
Sep 24 Javascript
JS动态增加删除UL节点LI及相关内容示例
May 21 Javascript
jquery中show()、hide()和toggle()用法实例
Jan 15 Javascript
JavaScript实现的简单拖拽效果
Jun 01 Javascript
通过扫描二维码打开app的实现代码
Nov 10 Javascript
Vue数据驱动模拟实现4
Jan 12 Javascript
面试常见的js算法题
Mar 23 Javascript
jQuery实现简单的抽奖游戏
May 05 jQuery
判断“命令按钮”是否被鼠标单击详解
Jul 31 Javascript
Javascript原生ajax请求代码实例
Feb 20 Javascript
梳理一下vue中的生命周期
Dec 30 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
论建造顺序的重要性
2020/03/04 星际争霸
php启用zlib压缩文件的配置方法
2013/06/12 PHP
WordPress中给文章添加自定义字段及后台编辑功能区域
2015/12/19 PHP
php生成mysql的数据字典
2016/07/07 PHP
PHP插件PHPMailer发送邮件功能
2017/02/28 PHP
php实现通过stomp协议连接ActiveMQ操作示例
2020/02/23 PHP
解决PHPstudy Apache无法启动的问题【亲测有效】
2020/10/30 PHP
JavaScript在XHTML中的用法详解
2013/04/11 Javascript
邮箱下拉自动填充选择示例代码附图
2014/04/03 Javascript
javascript制作游戏开发碰撞检测的封装代码
2015/03/31 Javascript
jQuery原生的动画效果
2015/07/10 Javascript
Bootstrap编写一个同时适用于PC、平板、手机的登陆页面
2016/06/30 Javascript
js实现简易垂直滚动条
2017/02/22 Javascript
vue实现简单表格组件实例详解
2017/04/16 Javascript
微信小程序自定义底部弹出框
2020/11/16 Javascript
Vue页面跳转动画效果的实现方法
2018/09/23 Javascript
angular6开发steps步骤条组件
2019/07/04 Javascript
python写的一个文本编辑器
2014/01/23 Python
Python中MySQL数据迁移到MongoDB脚本的方法
2016/04/28 Python
python更改已存在excel文件的方法
2018/05/03 Python
详解Django中间件的5种自定义方法
2018/07/26 Python
Python3安装psycopy2以及遇到问题解决方法
2019/07/03 Python
keras中epoch,batch,loss,val_loss用法说明
2020/07/02 Python
Html5移动端div固定到底部实现底部导航条的几种方式
2021/03/09 HTML / CSS
德国高尔夫商店:Golfshop.de
2019/06/22 全球购物
Oral-B荷兰:牙医最推荐的品牌
2020/02/25 全球购物
Jowissa官方网站:瑞士制造的手表,优雅简约的设计
2020/07/29 全球购物
J2ee常用的设计模式?说明工厂模式
2015/05/21 面试题
计算机科学与技术应届生求职信
2013/11/07 职场文书
上班看电影检讨书
2014/02/12 职场文书
人力资源经理的岗位职责范本
2014/02/28 职场文书
抽样调查项目计划书
2014/04/24 职场文书
2014年档案室工作总结
2014/12/01 职场文书
班主任寄语2015
2015/02/26 职场文书
旅行社计调工作总结
2015/08/12 职场文书
python运算符之与用户交互
2022/04/13 Python