web-dev-qa-db-ja.com

Reactネイティブ-画像コンポーネントのURIを使用してローカル画像を読み込む方法は?

私は私たちがローカルイメージをロードできることを知っています:

<Image source={require('folder/image.png')}/>

しかし、私はこのように画像をロードする必要があります:

<Image source={{uri: 'folder/image.png'}}/>

ネットワークイメージに対しては機能しますが、ローカルイメージに対しては機能せず、ローカルイメージに対してもエラーを発生させず、サイレントにイメージを表示しません。誰かがuriプロパティを使用してローカルイメージをロードする方法を教えてもらえますか?

6
Purple Bytes

Expoを使用してReactネイティブアプリケーションを構築している場合は、これが役立ちます。

1)expo-assetをインストールします:expo install expo-asset

2)imageUriを初期化して設定します。

import {Asset} from 'expo-asset';

const imageURI = Asset.fromModule(require('../../assets/test.png')).uri;

3)私の場合、NativeBaseのサムネイル上で必要でした:

<Thumbnail square source={{uri: imageURI}}/>

ドキュメント: https://docs.expo.io/versions/latest/sdk/asset/

0
Colo Ghidini