关于react-native封装插件--swiper

下面即将上演的一部是精彩绝伦的编程=。= ，扶好握把。

首先创建简单的react-native项目,创建一个文件夹。然后用命令符输入

 react-native init swiper
复制代码

创建完成之后开发项目，我用的vs

打开控制台，安装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,加上说明文档

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 }} />;
            }} //图片
/>
复制代码