React-native の画像制御の概要

1. 概要

ネットワーク画像、静的リソース、一時的なローカル画像、ローカルディスク上の画像 (フォトアルバムなど) など、さまざまな種類の画像を表示するために使用される React コンポーネント。
バージョン 0.14 以降、React Native は、iOS および Android アプリケーションで画像を管理するための統合された方法を提供します。アプリに静的画像を追加するには、画像ファイルを img などのコード フォルダーのどこかに配置し、次のように参照します:
<Image source={require(&#39;./img/check.png&#39;)} />
如果你有my-icon.ios.png和my-icon.android.png，Packager就会根据平台而选择不同的文件。
你还可以使用@2x，@3x这样的文件名后缀，来为不同的屏幕精度提供图片。比如下面这样的代码结构：
------ button.js
------ img
------   |-------- check@2x.png
------    |-------- check@3x.p
Packager会打包所有的图片并且依据屏幕精度提供对应的资源。譬如说，iPhone 5s会使用check@2x.png，而Nexus 5上则会使用check@3x.png。如果没有图片恰好满足屏幕分辨率，则会自动选中最接近的一个图片。
【注意】如果你添加图片的时候packager正在运行，可能需要重启packager以便能正确引入新添加的图片。为了使新的图片资源机制正常工作，require中的图片名字必须是一个静态字符串,不能在require中进行拼接。
//正确
<Image source={require(&#39;./my-icon.png&#39;)} />
错误
var icon = this.props.active ? 'my-icon-active' : 'my-icon-inactive';
<Image source={require(&#39;./&#39; + icon + &#39;.png&#39;)} />

使用混合App的图片资源

如果你在编写一个混合App（一部分UI使用React Native，而另一部分使用平台原生代码），也可以使用已经打包到App中的图片资源（通过Xcode的asset类目或者Android的drawable文件夹打包）：
<Image source={{uri: &#39;app_icon&#39;}} style={{width: 40, height: 40}} />
my-icon.ios.png と my-icon.android.png がある場合、パッケージャーはプラットフォームに応じて異なるファイルを選択します。

@2x や @3x などのファイル名サフィックスを使用して、さまざまな画面解像度の画像を提供することもできます。たとえば、次のコード構造:

------ button.js
------ img
------ |-------- check@ 2x .png------ |-------- check@3x.p
Packager はすべての画像をパッケージ化し、画面の精度に応じて対応するリソースを提供します。たとえば、iPhone 5s は check@2x.png を使用しますが、Nexus 5 は check@3x.png を使用します。画面解像度に正確に一致する画像がない場合は、最も近い画像が自動的に選択されます。
【注意】イメージを追加するときにパッケージャーが実行されている場合、新しく追加されたイメージを正しく導入するためにパッケージャーを再起動する必要がある場合があります。新しいイメージ リソース メカニズムが適切に動作するには、require のイメージ名は静的文字列である必要があり、require で結合することはできません。 <Image source={{uri: &#39;https://facebook.github.io/react/img/logo_og.png&#39;}} />

//正しい🎜🎜🎜🎜<画像ソース={require('./my-icon.png')} />🎜🎜🎜🎜エラー🎜🎜🎜🎜var icon = this.props.active? 'my-icon-active' : 'my-icon-inactive';🎜🎜🎜🎜🎜<画像ソース={require('./' + icon + '.png')} />🎜🎜🎜🎜🎜ハイブリッド アプリからの画像リソースの使用 🎜🎜🎜🎜 ハイブリッド アプリ (UI の一部で React Native を使用し、他の部分でプラットフォーム ネイティブ コードを使用) を作成している場合は、アプリにパッケージ化された画像リソースを使用することもできます。 (Xcode のアセット クラスまたは Android ドローアブル フォルダー パッケージ化を通じて): 🎜🎜🎜🎜<画像ソース={{uri: 'app_icon'}} スタイル={{幅: 40, 高さ: 40}} />🎜🎜🎜🎜注: これは安全性チェックなしで行われます。画像が実際にアプリケーションに存在することを自分で確認し、サイズを指定する必要があります。 🎜🎜🎜🎜ネットワーク画像の読み込み🎜🎜🎜🎜静的リソースとは異なり、画像のサイズを手動で指定する必要があります。 🎜🎜🎜//修正🎜🎜🎜🎜<画像ソース={{uri: 'https://facebook.github.io/react/img/logo_og.png'}} style={{幅: 400, 高さ: 400}} />🎜🎜🎜🎜//エラー🎜🎜🎜🎜<画像ソース={{uri: 'https://facebook.github.io/react/img /logo_og.png'}} />🎜🎜🎜

すべての場合にサイズを指定しないのはなぜですか

ブラウザーで画像のサイズを指定しない場合、ブラウザーは最初に 0x0 サイズの要素プレースホルダーをレンダリングし、ダウンロード後に画像をダウンロードします。完了したら、正しいサイズに基づいて画像をレンダリングします。これの最大の問題は、画像の読み込みプロセス中に UI が上下に飛び跳ねてしまい、ユーザー エクスペリエンスが非常に悪くなるということです。 React の
この動作はネイティブでは意図的に回避されています。これにより、開発者はリモート画像のサイズ (またはアスペクト比) を事前に知るためにさらに多くの作業を行う必要がありますが、これによりユーザー エクスペリエンスが向上すると考えられます。ただし、パッケージ化されたアプリケーション リソース ファイルからイメージを読み取る場合 (require('image!x') 構文を使用)、イメージのサイズはロード時にすぐに分かるため、サイズを指定する必要はありません。
たとえば、このような参照 require('image!logo') の実際の出力結果は次のようになります:
{"__packager_asset":true,"isStatic":true,"path":"/Users/react/HelloWorld/iOS/Images.xcassets/react.imageset/logo.png","uri":"logo","width":591,"height":573}

ネストによる背景画像の実現

は、次の背景画像に似ています。 Web )、 コンポーネントを作成し、背景画像を必要とするサブコンポーネントをそれに埋め込みます
return ( <画像ソース={...}> <テキスト>内側</テキスト> </画像> ; facebook.fresco:animated-base-support:0.11.0'

// GIF アニメーションをサポートする必要がある場合

'com.facebook.fresco:animated-gif:0.11.0' をコンパイルします

// WebP アニメーションを含む WebP 形式をサポートする必要がある場合
'com.facebook.fresco:animated-webp:0.11.0' をコンパイルします

'com.facebook.fresco:webpsupport:0.11.0' をコンパイルします

// アニメーション画像を使用せずに WebP 形式のみをサポートする必要がある場合

'com.facebook.fresco:webpsupport:0.11.0' をコンパイルします

}
同時に 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); }

2. 属性

1.onLayout (関数) 画像のレイアウトが変更されると、このメソッドが呼び出されます。呼び出しコードは次のとおりです:
: {layout: {x, y, width, height } }}.
2.onLoad (関数): 画像のロードが成功すると、このメソッドがコールバックされます
3.onLoadEnd (関数): 画像のロードに失敗した場合は、関係なく、このメソッドがコールバックされます画像が正常にロードされたかどうか
4.onLoadStart (fkuntion): このメソッドは、画像のロードが開始されるときに呼び出されます
5.resizeMode スケーリング、オプションのパラメーター ('cover'、'contain'、'stretch ') 画像のサイズがレイアウトを超える場合 サイズ変更の際、画像は設定されたモードに従って拡大縮小またはトリミングされます
カバー: 幅と高さが超えるまで画像のアスペクト比を維持しながら画像を拡大縮小しますまたはコンテナ ビューのサイズと同じになります (コンテナにパディングがある場合は、それに応じて減算します)。注釈: このようにして、画像はコンテナを完全に覆うか、コンテナを超えて、コンテナ内に空白スペースを残しません。
contain: 幅と高さがコンテナ ビューのサイズ以下になるまで、画像のアスペクト比を維持しながら画像を拡大縮小します (コンテナにパディングがある場合は、それに応じて減算します)。注釈: このように、画像はコンテナー内に完全に包まれ、コンテナー内に空白スペースが生じる可能性があります。
stretch: 幅と高さがコンテナーを満たすまで、アスペクト比を維持せずに画像を引き伸ばします。
繰り返し: コンテナがいっぱいになるまでタイルを繰り返します。画像は元のサイズを維持します。 iOS のみで利用可能です。
center: 伸ばさずに中央に配置します。
6.source {uri:string} は、マークされた画像を参照します。このパラメータは、ネットワーク URL アドレスまたはローカル (参照には require (相対パス) を使用) パスにすることができます

3. スタイル style

1.FlexBoxはフレキシブルボックススタイルをサポートします
2.Transformsは属性アニメーションをサポートします3.resizeModeはスケーリングモードを設定します
4.backgroundColor背景色
5.borderColor境界線の色 6.borderWidth境界線の幅
7 . borderRadius 角丸の境界線
8.overflow コンテナを超える画像サイズを設定、表示または非表示を設定可能('visible'、'hidden')
9.tintColor カラー設定 10.opacity 不透明度を0.0に設定(透明)-1.0 (完全に不透明)

四。 例

ネットワーク回路図の追加例
class MyImageDemo extends Component {    与える（） {        戻る （            <スタイル={[styles.flex,{marginTop:45}]}を表示>                <MyImage imgs={imgs}> </MyImage>            </表示>        );    } }
class MyImage extends Component {    コンストラクター(小道具) {        スーパー(小道具);        this.state = {            count: 0,//画像インデックス            画像: this.props.imgs,        };    }
render() {        戻る （            <スタイル={[styles.flex,{alignItems:'center'}]}を表示>                <スタイル={styles.image}を表示>                    <画像スタイル={styles.img}                           sizeMode='contain'                           ソース={{uri:this.state.imgs[this.state.count]}}/>                </表示>                <スタイル={styles.btns}を表示>                    <TouchableOpacity onPress={this.onPrevious.bind(this)}><View                        style={styles.btn}><Text>上一张</Text></View></TouchableOpacity>
<TouchableOpacity onPress={this.onNext.bind(this) }><View style={styles.btn}><Text>下一张</Text></View></TouchableOpacity>                </表示> </表示>        );    }
onPrevious() {        var count = this.state.count;        カウント - ;        if (カウント >= 0) {            this.setState({                カウント: カウント、            });        }    }    onNext() {        var count = this.state.count;        カウント++;        if (count
const スタイル = StyleSheet.create({        フレックス: {            フレックス: 1、        }、        画像： {            幅: 300、            高さ: 200、            境界幅: 1、            justifyContent: 'センター',            alignItems: '中心',            境界線の色: '#ccc',            境界半径: 5、        }、        画像: {            幅: 200、            身長: 150、        }、        ボタン: {            幅: 60、            身長: 35、            境界幅: 1、            境界線の色: '#ccc',            境界半径: 3、            justifyContent: 'センター',            alignItems: '中心',            右マージン: 30、        }、        ボタン: {            flexDirection: '行',            マージントップ: 20、            justifyContent: 'センター'        }    } );

效果

Image_first.jpeg

点击下一张

Image_second.jpeg

点击下一张

Image_third.jpeg

记录我自己的RN学习之路，纯属自己增值，有何不对的地，一起讨论进步

以上がReact-native の画像制御の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。