109

現在、React Native を使用してテスト アプリを作成しています。これまでのところ、Image モジュールは正常に動作しています。

たとえば、 という名前の画像がある場合avatar、以下のコード スニペットは正常に機能します。

<Image source={require('image!avatar')} />

しかし、それを動的文字列に変更すると、

<Image source={require('image!' + 'avatar')} />

エラーが発生します：

不明なモジュール「image!avatar」が必要です。モジュールが存在することが確実な場合は、パッケージャーを再起動してみてください。

明らかに、これは不自然な例ですが、動的なイメージ名は重要です。React Native は動的な画像名をサポートしていませんか?

動的な画像名でネイティブ エラーに対応する

4

16 に答える 16

88

これについては、「静的リソース」セクションのドキュメントで説明されています。

バンドル内のイメージを参照する唯一の許可された方法は、ソースに require('image!name-of-the-asset') を文字通り記述することです。

// GOOD
<Image source={require('image!my-icon')} />

// BAD
var icon = this.props.active ? 'my-icon-active' : 'my-icon-inactive';
<Image source={require('image!' + icon)} />

// GOOD
var icon = this.props.active ? require('image!my-icon-active') : require('image!my-icon-inactive');
<Image source={icon} />

ただし、Xcode でアプリの xcassets バンドルに画像を追加することも忘れないでください。ただし、コメントからは既に行っているようです。

http://facebook.github.io/react-native/docs/image.html#adding-static-resources-to-your-app-using-images-xcassets

于 2015-06-16T12:50:33.263 に答える
15

まず、必要な画像を含むファイルを作成します - React ネイティブ画像はこの方法でロードする必要があります。

assets/index.js

export const friendsandfoe = require('./friends-and-foe.png'); 
export const lifeanddeath = require('./life-and-death.png'); 
export const homeandgarden = require('./home-and-garden.png');

今すぐすべてのアセットをインポートします

App.js

import * as All  from '../../assets';

イメージを補間値として使用できるようになりました。ここで、imageValue (バックエンドから取得) は名前付きローカル ファイルと同じです。つまり、「homeandgarden」:

<Image style={styles.image} source={All[`${imageValue}`]}></Image>
于 2020-04-06T17:31:29.050 に答える
6 
import React, { Component } from 'react';
import { Image } from 'react-native';

class Images extends Component {
  constructor(props) {
    super(props);
    this.state = {
           images: {
                './assets/RetailerLogo/1.jpg': require('../../../assets/RetailerLogo/1.jpg'),
                './assets/RetailerLogo/2.jpg': require('../../../assets/RetailerLogo/2.jpg'),
                './assets/RetailerLogo/3.jpg': require('../../../assets/RetailerLogo/3.jpg')
            }
    }
  }

  render() {
    const {  images } = this.state 
    return (
      <View>
        <Image
                            resizeMode="contain"
                            source={ images['assets/RetailerLogo/1.jpg'] }
                            style={styles.itemImg}
                        />
     </View>
  )}
}
于 2019-07-03T15:50:04.467 に答える
5

あなたが使用することができます

<Image source={{uri: 'imagename'}} style={{width: 40, height: 40}} />

画像を表示します。

から：

https://facebook.github.io/react-native/docs/images.html#images-from-hybrid-app-s-resources

于 2015-12-28T02:14:39.777 に答える