封裝插件swiper使用詳解

這次帶給大家封裝插件swiper使用詳解，使用封裝插件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: &#39;#fff&#39; }}
    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#Array##-heightCarousel的高度number150--true

#屬性	說明
##類型	預設值
Carousel資料來源	Array	-	Carousel資料來源
	##onPressItem	#點選Carousel Item的時候觸發	fn
	#renderItem	具體的渲染Item的方法，請參考FlatList	fn
	autoplay	是否自動切換	bool

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 }} />;
      }} //图片
/>

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：
如何實作vue-router中query動態傳參

############為什麼不能用ip存取webpack本地開發環境###############nodejs對密碼加密處理方法總結#########

以上是封裝插件swiper使用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！