Detaillierte Einführung in die ReactNative Image-Komponente

In diesem Artikel wird hauptsächlich die Verwendung der ReactNative Image-Komponente ausführlich erläutert. Der Herausgeber findet sie recht gut, daher werde ich sie jetzt mit Ihnen teilen und als Referenz verwenden. Lassen Sie uns dem Herausgeber folgen und einen Blick darauf werfen.

Es war in letzter Zeit sehr interessant, ReactNative zu lernen. Während des Lernprozesses stellte ich fest, dass der Inhalt der von einigen Leuten im Internet geschriebenen Artikel veraltet ist Die Version von ReactNative wird zu schnell aktualisiert. Wenn Sie jetzt einen Artikel lesen, der in 16 oder sogar 15 Jahren geschrieben wurde, und die Wissenspunkte mit offiziellen Dokumenten vergleichen, werden Sie überrascht sein. Daher rate ich Studenten, die ReactNative lernen möchten, Lernmaterialien auszuwählen, die auf offiziellen Dokumenten und offiziellen Demos basieren, sowie andere Materialien als Ergänzung.

Bildkomponente

In ReactNative ist Image eine Komponente zum Anzeigen von Bildern und hat den gleichen Effekt wie das ImageView-Steuerelement bei der Entwicklung von Android. Es kann zum Anzeigen von Netzwerkbildern, statischen Ressourcen, temporären lokalen Bildern und Bildern auf der lokalen Festplatte (z. B. Fotoalben) usw. verwendet werden. Durch die richtige Verwendung von Bildkomponenten können Informationen an den Benutzer anschaulicher und intuitiver übermittelt werden.

Bildkomponente lädt statische Ressourcen im Projekt

Die statischen Ressourcen hier beziehen sich auf die Bilder im JS-Teil, die geladen werden, Ressourcen unter Nicht-Android, iOS nativ Anwendungsdatei, um diese Art von Bildressource zu laden, führen wir die Bilddatei über require('der Pfad der Bilddatei relativ zu diesem Dateiverzeichnis') ein und setzen sie auf das Quellattribut der Bildkomponente. Wie folgt

 <Image
 style={styles.image}
  //  ./表示当前文件目录 ../ 父目录
   source={require(&#39;./reactlogo.png&#39;)}
 />

Zu beachten ist, dass der Pfad in den oben genannten Anforderungen nicht mit Zeichenfolgen gespleißt werden kann, da sonst ein Ladefehler gemeldet wird.

Native Bildressourcen laden

Die hier erwähnten nativen Ressourcen beziehen sich auf das Drawable im res-Verzeichnis, wenn wir Android entwickeln, oder auf das Mipmap-Verzeichnis. Und das entsprechende Ressourcenverzeichnis unter iOS. Das Laden dieser Art von Bildressourcen unterscheidet sich ein wenig vom Laden von Ressourcen im Projekt. Nehmen Sie hier Android als Beispiel und laden Sie die Datei unter „Drawable“ wie folgt:

 <Image
 source={{uri: &#39;launcher_icon&#39;}}
 style={{width: 38, height: 38}}
/>);

Zusätzlich zur oben genannten Methode kann das Laden auch auf folgende Weise erfolgen:

<Image
 source={nativeImageSource({
 android: &#39;launcher_icon&#39;,
 width: 96,
 height: 96
  })}
/>

Die Breite und Höhe des Bildes kann in nativeImageSource angegeben werden Die Höhe wird gleichzeitig im Stilattribut der Bildkomponente festgelegt, die endgültige Breite und Höhe sind Die Breite und Höhe im Stil haben Vorrang. Die Bildressourcen unter „Drawable“ werden standardmäßig oben geladen. Wenn Sie die Ressourcen in Mipmap laden möchten, können Sie Folgendes tun:

<Image
 source={nativeImageSource({
 android: &#39;mipmap/launcher_icon&#39;,
 width: 96,
 height: 96
 })}
/>

Mit der oben genannten Methode: Wir können Bilder laden. Wenn das Bild neu zum Zeichenobjekt hinzugefügt wird, muss es neu kompiliert und ausgeführt werden, sonst wird es nicht wirksam.

Laden von Netzwerkbildern

 <Image
 source={{uri: &#39;https://facebook.github.io/react/img/logo_og.png&#39;}}
 style={{width: 38, height: 38}}
/>);

Beim Laden von Netzwerkbildern ist zu beachten, dass Sie die Breite und Breite angeben müssen Höhe des Stils, andernfalls wird das Bild nicht angezeigt (die Standardbreite und -höhe werden nicht auf 0 gesetzt).

Häufig verwendete Attribute der Bildkomponente

Stil:

• Breite: Legen Sie die Breite von fest das Bild

• height: Legt die Höhe des Bildes fest

• borderWidth: Legt die Randbreite fest

• borderColor: Randfarbe festlegen

• backgroundColor: Hintergrundfarbe festlegen (dieses Attribut wird im Allgemeinen verwendet, wenn einige Bilder transparente Hintergründe haben)

• opacity: Opazität. Der Wert liegt zwischen 0 und 1, wobei 1 undurchsichtig und 0 transparent angibt.

• tintColor: Bilder einfärben. Beispielsweise wird in diesem Fall ein Schwarzweißbild häufig in ein anderes Farbbild umgewandelt

blurRadius legt den Unschärferadius des Bildes fest, wodurch das Bild unscharf werden kann

defaultSource legt das Standardbild für das Bild fest, das zur Anzeige des Bildes vor dem Netzwerk verwendet wird wurde erfolgreich geladen. (ios-Unterstützung)

source

Oben haben wir das Quellattribut zum Laden verschiedener Bildressourcen eingeführt, aber es gibt noch ein anderes, das wir noch nicht erwähnt haben. Es kann ein Array als Parameter empfangen. Damit es je nach Komponente geladen werden kann, wird das Bild automatisch mit passender Breite und Höhe geladen. Die Verwendung ist wie folgt:

 <Image
  style={{flex: 1}}
  source={[
       {uri: &#39;https://facebook.github.io/react/img/logo_small.png&#39;, width: 38, height: 38},
       {uri: &#39;https://facebook.github.io/react/img/logo_small_2x.png&#39;, width: 76, height: 76},     
        uri: &#39;https://facebook.github.io/react/img/logo_og.png&#39;, width: 400, height: 400}
      ]}
 />

resizeMode

Dieses Attribut wird verwendet, um den Zoommodus des Bildes festzulegen, der entsprechende Wert ist wie folgt

• Abdeckung: Behalten Sie das Bildseitenverhältnis bei, bis die Breite und Höhe größer oder gleich der Größe der Containeransicht sind (siehe Effekt unten)

• enthalten: Behalten Sie die Bildbreite und -höhe bei. Skalieren Sie das Bild unter der Voraussetzung, das Verhältnis beizubehalten, bis die Breite und Höhe kleiner oder gleich der Größe der Containeransicht sind

• Strecken: Dehnen Sie das Bild, ohne das Seitenverhältnis beizubehalten, bis die Breite und Höhe gerade den Container ausfüllen

• Zentriert, ohne zu strecken

• Wiederholen: Wiederholen Sie das Kacheln des Bildes, bis der Behälter gefüllt ist. Das Bild behält seine ursprüngliche Größe. (iOS)

Unterstützt Bilder im GIF- und WebP-Format auf Android

Standardmäßig ist dies bei Android der Fall Unterstützt keine GIF- und WebP-Formate. Sie müssen die entsprechenden Abhängigkeiten nach Bedarf in der Datei build.gradle hinzufügen.

dependencies {
 // If your app supports Android versions before Ice Cream Sandwich (API level 14)
 compile 'com.facebook.fresco:animated-base-support:1.0.1'

 // For animated GIF support
 compile 'com.facebook.fresco:animated-gif:1.0.1'

 // For WebP support, including animated WebP
 compile 'com.facebook.fresco:animated-webp:1.0.1'
 compile 'com.facebook.fresco:webpsupport:1.0.1'

 // For WebP support, without animations
 compile 'com.facebook.fresco:webpsupport:1.0.1'
}

Wenn Sie ProGuard verwenden, während Sie GIF verwenden, müssen Sie die folgenden Regeln zu proguard-rules.pro hinzufügen

-keep class com.facebook.imagepipeline.animated.factory.AnimatedFactoryImpl {
 public AnimatedFactoryImpl(com.facebook.imagepipeline.bitmaps.PlatformBitmapFactory, com.facebook.imagepipeline.core.ExecutorSupplier);
}

ImageBackground

该组件是Image组件的扩展，它支持嵌套组件。如在图片上显示一个文本，则可以通过如下实现

      <ImageBackground
        style={{width: 100, height: 100, backgroundColor: &#39;transparent&#39;}}
        source={{uri: &#39;https://facebook.github.io/react/img/logo_og.png&#39;}}
      >
        <Text style={styles.nestedText}>
          React
        </Text>
      </ImageBackground>

实现效果图如下，一般的我们可以嵌套ActivityIndicator来提示用户图片正在加载，当加载完成隐藏此控件。

网络图片加载监听

对于网络图片的加载，ReactNative提供了一些属性用于图片不同加载时期的监听。

• onLoadStart：图片开始加载时调用

• onLoad：图片加载完成时调用，此时图片加载成功

• onLoadEnd：加载结束后调用，与onLoad不同的是不论成功还是失败，此回调函数都会被执行。

使用方法如下

      <Image
        source={{uri:&#39;https://facebook.github.io/react/img/logo_og.png&#39;}}
        style={[styles.base, {overflow: &#39;visible&#39;}]}
        onLoadStart={() => console.log(&#39;onLoadStart&#39;)}
        onLoad={(event) => console.log(&#39;onLoad&#39;) }
        onLoadEnd={() => console.log(&#39;onLoadEnd&#39;)}
      />

对于iOS，还提供了加载进度的回调函数onProgress

<Image
  style={styles.image}
  onProgress={(event) => {
   console.log(&#39;onProgress&#39;)
   this.setState({
    progress: Math.round(100 * event.nativeEvent.loaded / event.nativeEvent.total)
  })}}/>

可以通过参数event.nativeEvent.loaded获取已经加载的大小，通过event.nativeEvent.total获取图片的总大小。

不仅如此，ReactNative还提供了预加载图片函数prefetch(url: string)，它可以将图片下载到磁盘缓存

var prefetchTask = Image.prefetch('https://facebook.github.io/react/img/logo_og.png');
prefetchTask.then(() => {
  //此处可设置状态，显示Image组件。此时组件会使用预加载的图片信息。而不用再次加载
  console.log('加载图片成功')
}, error => {
  console.log('加载图片失败')
})

好了，今天就介绍到这里，文中若有错误的地方欢迎指正，再次感谢。文中一些示例源码，可前往GitHub在线预览，也可以下载项目学习其他组件。

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in die ReactNative Image-Komponente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!