react-native封裝外掛程式swiper的使用方法，react-nativeswiper

react-native封裝外掛程式swiper的使用方法，react-nativeswiper

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

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。