Implementieren Sie die Bildanzeigekomponente mithilfe von Native in React

In diesem Artikel wird hauptsächlich die Methode der React Native-Bildanzeigekomponente vorgestellt. Jetzt teile ich sie mit Ihnen und gebe sie als Referenz.

React Native-Bildanzeigekomponente: React-Native-Image-Viewer, reine JS-Komponente, kleine und schnelle Symbolanzeigekomponente. Unterstützt das Vergrößern und Verkleinern von Bildern, das Festlegen von Ersatzbildern, wenn Bilder nicht geladen werden können, das lokale Speichern von Bildern und andere Funktionen.

Rendering

Installationsmethode

npm i react-native-image-zoom-viewer --save

Verwendungsbeispiel

const images = [
 {
  url: 'https://avatars2.githubusercontent.com/u/7970947?v=3&s=460',
 },
 {
  url: 'https://avatars2.githubusercontent.com/u/7970947?v=3&s=460',
 },
 {
  url: 'https://avatars2.githubusercontent.com/u/7970947?v=3&s=460',
 },
];

export default class Component06 extends Component {
 constructor(props) {
  super(props);
 }

 render() {
  return (
   <View style={{ flex: 1 }}>
    <ImageViewer
     imageUrls={images}
     failImageSource={{
      url: &#39;https://avatars2.githubusercontent.com/u/7970947?v=3&s=460&#39;,
      width: Dimensions.get(&#39;window&#39;).width,
      height: Dimensions.get(&#39;window&#39;).width,
     }}
    />
   </View>
  );
 }
}

Hauptparameterbeschreibung

1. imageUrls Array von Bild-URL-Adressen

2. enableImageZoom Ob Zoomen zugelassen werden soll

3. failImageSource Bild wird angezeigt, wenn das Laden fehlschlägt

4. loadingRender wird geladen.

5. renderHeader-Kopfstil

6. renderFooter-Unterseitenstil

7. renderIndicator-Seitenindikatorstil

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

Verwandte Artikel:

Vue und vue-i18n werden kombiniert, um eine mehrsprachige Umschaltmethode für Hintergrunddaten zu implementieren

JQuery-Auswahlkomponente ist die ausgewählte Wertmethode

$set und Array-Update-Methode in vue.js_vue.js

Das obige ist der detaillierte Inhalt vonImplementieren Sie die Bildanzeigekomponente mithilfe von Native in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!