關於react-native封裝外掛--swiper

sunshinezhong發表於2018-03-16
React封裝

下面即將上演的一部是精彩絕倫的程式設計=。= ，扶好握把。

首先建立簡單的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 }} />;
            }} //圖片
/>
複製程式碼

相關文章