So implementieren Sie die Bildanzeigekomponente in React Native

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. Dieser Artikel führt Sie hauptsächlich in die Methode der React Native-Bildanzeigekomponente ein. Ich hoffe, er kann Ihnen helfen.

Rendering

Installationsmethode

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

4. loadingRender wird geladen.

5. renderHeader-Header-Stil

6. renderFooter-Bottom-Stil

7. renderIndicator-Seitenindikatorstil

Verwandte Empfehlungen:

Detaillierte Erläuterung von ImageView.js, einer großen Bildbetrachtungskomponente, die den mobilen QQ-Raum imitiert, basierend auf zepto.js_javascript-Fähigkeiten

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