Ein schneller und einfacher Bildschieberegler für React Native

Blog

Ein schneller und einfacher Bildschieberegler für React Native

React-Native-Image-Slider Ein schneller und einfacher Bild-Slider für React Native. Betreuer gesucht!



reagieren-native-image-slider

Installation

npm install react-native-image-slider --save

oder



yarn add react-native-image-slider

Verwendungszweck

import ImageSlider from 'react-native-image-slider'; // ... render() { return () }

Autoplay / Benutzerdefinierte Tasten / Benutzerdefinierte Folie / Loop

class Example extends Component { render() { const images = [ 'https://placeimg.com/640/640/nature', 'https://placeimg.com/640/640/people', 'https://placeimg.com/640/640/animals', 'https://placeimg.com/640/640/beer', ]; return ( Content 1 ( // It's important to put style here because it's got offset inside )} customButtons={(position, move) => ( {images.map((image, index) => { return ( move(index)} style={styles.button} > {index + 1} ); })} )} /> Content 2 ); } }

Requisiten

images

gerenderte Bilder

customButtons

Die Funktion gibt die benutzerdefinierte Paginierungsschaltflächenkomponente zurück, sie hat einen Positionsindex und eine Positionsfunktion als Argumente



customSlide

Funktion gibt Node mit Argumenten zurück |_+_| - Bilderlistenindex, |_+_| - alles, was Sie innerhalb von Images prop übergeben, |_+_| - für die oberste Komponente Ihrer benutzerdefinierten Folie, |_+_| - berechnete Rutschenbreite

index

aktiviert Autoplay, wenn es übergeben wird (es verbraucht Millisekunden)

item

[BUGGY ON ANDROID] scrollt Bilder in Schleifen, aber nur in eine Richtung

style

[NUR IOS] wie Schleife, aber in jede Richtung

width

wird aufgerufen, wenn die aktuelle Position geändert wird

autoPlayWithInterval

verwendet für gesteuerte Komponenten

loop

gibt ein Objekt mit Bild-URL und Index des gedrückten Bildes zurück

loopBothSides

Stile ScrollView innerhalb von ImageSlider, können Sie hier die Höhe übergeben (100% standardmäßig)

Download-Details:

Autor: PaulBGD

GitHub: https://github.com/PaulBGD/react-native-image-slider

#reagieren-native #programmierung