React Native-Ansichtskomponente

Dieses Mal bringe ich Ihnen die React Native-Ansichtskomponente. Was sind die Vorsichtsmaßnahmen für die React Native-Ansichtskomponente?

In diesem Artikel wird hauptsächlich die Methode der React Native-Bildanzeigekomponente vorgestellt. Der Herausgeber findet sie recht gut, daher werde ich sie jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Editor, um einen Blick darauf zu werfen

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, und das lokale Speichern von Bildern.

Rendering

InstallationMethode

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

Anwendungsbeispiel

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 Das Bild wird angezeigt, wenn das Laden fehlschlägt

4. loadingRender wird geladen.

5. renderHeader-Header-Stil

6. renderFooter-Bottom-Stil

7. renderIndicator Seitenzahl-Indikatorstil

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall hier gelesen haben Artikel und mehr Wie aufregend, achten Sie bitte auf andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So implementieren Sie eine Back-Force-Aktualisierung auf der WeChat-Webseite

Verwenden Sie js, um schnell die Adresse des Bildes zu erhalten in der HTML-Seite

Das obige ist der detaillierte Inhalt vonReact Native-Ansichtskomponente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!