ReactNative Image コンポーネントの詳細な紹介

この記事ではReactNative Imageコンポーネントの使い方の詳しい解説を中心に紹介していますが、編集者がとても良いと思ったので、参考としてシェアさせていただきます。エディターをフォローして見てみましょう

最近 ReactNative を学ぶのがとても面白くて、その過程で、インターネット上で一部の人々が書いた記事の内容が古いことに気づきました。これは主に ReactNative のバージョンが古いためです。今読むと、16 年前、さらには 15 年前に書かれた記事でも、知識のポイントを公式ドキュメントと比較すると驚くでしょう。そのため、ReactNativeを学習したい学生には、公式ドキュメントや公式デモ、その他の補足的な資料に基づいて学習教材を選択することをお勧めします。

Imageコンポーネント

ReactNativeにおいてImageは画像を表示するために使用されるコンポーネントであり、Android開発時のImageViewコントロールと同じ効果があります。ネットワークイメージ、静的リソース、一時的なローカルイメージ、ローカルディスク上のイメージ（フォトアルバムなど）などを表示するために使用できます。画像コンポーネントを適切に使用すると、情報をより鮮明かつ直感的にユーザーに伝えることができます。

画像コンポーネントはプロジェクトに静的リソースを読み込みます

ここでの静的リソースとは、ロードされる js 部分の画像、Android 以外の iOS ネイティブ アプリケーションのリソース ファイルを指します。そのような画像リソースを読み込むために、require を渡します。 (「このファイル ディレクトリを基準とした画像ファイルのパス」) 画像ファイルを導入し、それを Image コンポーネントの source 属性に設定します。以下に示すように

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

注意すべき点は、パスを上記の require の文字列で結合できないことです。そうでない場合は、読み込みエラーが報告されます。

ネイティブ画像リソースをロードする

ここで説明するネイティブ リソースとは、Android 開発時の res ディレクトリ内のドローアブル、または mipmap ディレクトリを指します。そして、ios の下の対応するリソース ディレクトリ。この種の画像リソースのロードは、プロジェクト内のリソースのロードとは少し異なります。ここでは Android を例として次のようにファイルをロードします

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

上記の方法でロードすることもできます。以下のメソッドで読み込みます

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

画像の幅と高さはnativeImageSourceで指定できますが、画像コンポーネントのstyle属性で幅と高さを同時に設定した場合、最終的な幅と高さが基準になります。幅と高さをスタイリッシュに。ドローアブル配下の画像リソースは上記でデフォルトで読み込まれていますが、ミップマップにリソースを読み込みたい場合は、次のようにすることができます

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

新しく追加された画像であれば、上記の方法で読み込むことができます。ドローアブルでは再ロードして実行する必要があります。そうしないと有効になりません。

ネットワーク画像の読み込み

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

ネットワーク画像の読み込みに関する注意点の 1 つは、スタイルの幅と高さを指定する必要があることです。指定しないと画像が表示されません (デフォルトの幅と高さは表示されません)。 0に設定します)。

画像コンポーネントの一般的に使用される属性

style:

• width: 画像の幅を設定

• height: 画像の高さを設定

• borderWidth: 境界線を設定width

• borderColor: 境界線の色を設定します

• backgroundColor: 背景色を設定します (このプロパティは通常、一部の画像の背景が透明な場合に使用されます)

• opacity: 不透明度、値は 0 から 1 の間です。 1 は不透明を意味し、0 は不透明を意味します。

• tintColor: 画像を色付けします。たとえば、白黒の画像をクリックすると、この属性

blurRadius を使用してぼかしを設定できます。画像の半径 (ぼかし可能) Picture

defaultSource は、ネットワークを正常にロードする前に画像を表示するために使用される画像のデフォルト画像を設定します。 (iOS サポート)

source

上記では、さまざまな画像リソースをロードするためのsource属性を紹介しましたが、まだ言及していない別の属性があり、配列をパラメータとして受け取ることができるため、それに応じて自動的にロードできます。コンポーネントの幅と高さに合わせます。使い方は以下の通りです

 <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

この属性は画像のズームモードを設定するために使用され、対応する値は次のとおりです

• cover: 画像の縦横比を幅まで維持しますと高さがコンテナ ビューのサイズ以上である (以下の効果を参照)

• contain: 幅と高さがコンテナ ビューのサイズ以下になるまで、画像のアスペクト比を維持しながら画像を拡大縮小します。コンテナビューのサイズ

• stretch: アスペクト比を維持せずに、幅と高さがコンテナを満たすまで画像を引き伸ばします

• center、引き伸ばさずに中央に配置します

• repeat: 画像をタイル状に並べて繰り返します容器を満たします。画像は元のサイズを維持します。 (iOS)

Android で GIF および WebP 形式の画像をサポートします

デフォルトでは、Android は GIF および WebP 形式をサポートしません。必要に応じて、対応する依存関係を build.gradle ファイルに追加する必要があります。

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'
}

GIFの使用中にProGuardを使用する場合は、次のルールをproguard-rules.proに追加する必要があります

-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在线预览，也可以下载项目学习其他组件。

以上がReactNative Image コンポーネントの詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。