Heim > Web-Frontend > js-Tutorial > Hauptteil

So verwenden Sie den Swiper des React-Native-Paket-Plug-Ins

亚连
Freigeben: 2018-05-25 16:43:35
Original
2108 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich die Verwendung des React-Native-Packaging-Plug-Ins Swiper vorgestellt. Jetzt teile ich ihn mit Ihnen und gebe ihn als Referenz.

Erstellen Sie zunächst ein einfaches React-Native-Projekt und erstellen Sie einen Ordner. Geben Sie dann mit dem Befehlszeichen

react-native init swiper
Nach dem Login kopieren

ein. Nach dem Erstellen des Projekts verwende ich vs

Um es zu öffnen, installieren Sie die Swiper-Abhängigkeiten.

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 muss unter npm i aktualisiert werden

Starten Sie das App-Projekt

ios: React-native run-ios
Android: React-native run-android

Beginnen Sie mit dem Codieren, erstellen Sie eine swiper.js-Datei im Komponentenordner in src und index.js sowie Dokumentation

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>
  );
 }
}
Nach dem Login kopieren

Dies ist die index.js-Datei

import { Carousel } from &#39;./carousel/Carousel&#39;;

export { Carousel };
Nach dem Login kopieren

Öffentliche Komponentenbibliothek

Hier werden öffentliche Komponenten platziert, 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 &#39;prop-types&#39;;
import React, { Component } from &#39;react&#39;;

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() {}
}
Nach dem Login kopieren

Komponentenliste

Karussell ( Karussell Komponente)

wird hauptsächlich für allgemeine Bildkarussells verwendet und kann eine Antwort auf Klickereignisse bereitstellen.

Verwendung:

Requisiten:


属性描述类型默认值
dataCarousel数据源Array-
heightCarousel的高度number150
onPressItem点击Carousel Item的时候触发fn-
renderItem具体的渲染Item的方法,请参考FlatListfn-
autoplay是否自动切换booltrue
autoplayTimeoutItem自动切换的时间间隔(单位s)number2.5

Wo importieren

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

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Ajax-Analyse der asynchronen Belastung

Ajax-Technologiezusammensetzung und Kernprinzipanalyse

Über den Ausgabestream am Ende des Servlets in der Ajax-Technologie

Das obige ist der detaillierte Inhalt vonSo verwenden Sie den Swiper des React-Native-Paket-Plug-Ins. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage