Detaillierte Erläuterung der Verwendung des Paket-Plug-Ins Swiper

Dieses Mal werde ich Ihnen die Verwendung des Kapselungs-Plug-In-Swipers ausführlich erläutern. Was sind die Vorsichtsmaßnahmen bei der Verwendung des Kapselungs-Plug-In-Swipers? sehen.

Erstellen Sie zunächst ein einfaches React-Native-Projekt und erstellen Sie einen Ordner. Geben Sie dann über die Befehlszeile

react-native init swiper

ein. Nach dem Erstellen des Projekts verwende ich vs

, um die Konsole zu öffnen und die Swiper-Abhängigkeit zu installieren.

Installieren: npm i reagieren-native-swiper --save
Anzeigen: npm view reagieren-native-swiper
Entfernen: npm rm reagieren-native-swiper --save
Auch hier Die lokale Abhängigkeitsbibliothek unter npm i muss aktualisiert werden

Starten Sie das App-Projekt

ios: React-native Run-ios
Android: React-native Run- android

Beginnen Sie mit dem Codieren, erstellen Sie einen Komponentenordner in src, erstellen Sie eine swiper.js-Datei und index.js und fügen Sie Dokumentation hinzu

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>
  );
 }
}

Das ist die index.js-Datei

import { Carousel } from './carousel/Carousel';
export { Carousel };

Öffentliche Komponentenbibliothek

Dies wird verwendet, um öffentliche Komponenten zu platzieren, die nichts mit dem Geschäft zu tun haben. Die Komponentenimplementierung muss Flexibilität und Skalierbarkeit berücksichtigen und darf keine spezifische Geschäftslogik enthalten.

Der Komponente muss der Name des von Ihnen betriebenen Unternehmens vorangestellt werden, z. B. TryCarousel.js. Jede Komponente muss in einem separaten Verzeichnis abgelegt werden und das Verzeichnis muss ausschließlich aus Kleinbuchstaben (durch Bindestriche getrennt) bestehen, z. B. carousel/TryCarousel.js.

Eine grundlegende Komponentenstruktur:

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() {}
}

Komponentenliste

Karussell (Karussellkomponente)

Hauptsächlich Wird für das allgemeine Bildkarussell verwendet und kann eine Reaktion auf Klickereignisse bereitstellen.

Verwendung:

Requisiten:

属性	描述	类型	默认值
data	Carousel数据源	Array	-
height	Carousel的高度	number	150
onPressItem	点击Carousel Item的时候触发	fn	-
renderItem	具体的渲染Item的方法，请参考FlatList	fn	-
autoplay	是否自动切换	bool	true
autoplayTimeout	Item自动切换的时间间隔（单位s）	number	2.5

Wo importieren

import { HigoCarousel } from '../../components';
<Carousel
      data={} //接受的数据
      onPressItem={} //点击事件
      height={} //图片高度
      autoplay={} //是否自动播放
      autoplayTimeout={} //过渡时间
      renderItem={item => {
       return <Image source={{ uri: item.imageSource }} style={{ flex: 1 }} />;
      }} //图片
/>

Ich glaube, Sie haben die Methode gemeistert, nachdem Sie den Fall in diesem Artikel gelesen haben. Spannender Bitte achten Sie auf andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So implementieren Sie die dynamische Parameterübergabe von Abfragen im Vue-Router

Warum können Sie das nicht? IP verwenden, um lokal auf das Webpack zuzugreifen? Entwicklungsumgebung

Zusammenfassung der Passwortverschlüsselungsverarbeitungsmethode von nodejs

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung des Paket-Plug-Ins Swiper. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!