web-dev-qa-db-ja.com

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

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

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

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

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

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

androidiosreactjsimagereact-native
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