web-dev-qa-db-ja.com

画像ファイルのネイティブ使用変数を反応させる

React Nativeで静的イメージを使用するには、そのイメージに具体的に要求する必要があることを知っていますが、数値に基づいてランダムイメージをロードしようとしています。たとえば、ディレクトリにimg1.png-img100.pngという100個の画像があります。私は次のことをする方法を見つけようとしています

<Image source={require(`./img${Math.floor(Math.random() * 100)}.png`)}/>

私はこれが意図的に機能しないことを知っていますが、回避策があれば大歓迎です。

javascriptiosreact-native
36
bgrober

反応ネイティブの獣を知る人にとって、これは助けになるはずです:)

私も過去にいくつかのサイトを訪問しましたが、ますますイライラすることがわかりました。 このサイトはこちら と読むまで。

これは別のアプローチですが、最終的には成果を上げます。基本的に、最善のアプローチは、すべてのリソースを1か所にロードすることです。次の構造を考慮してください

app  
   |--img
      |--image1.jpg
      |--image2.jpg
      |--profile
          |--profile.png
          |--comments.png
      |--index.js

index.js、 あなたはこれを行うことができます：

const images = {
    profile: {
        profile: require('./profile/profile.png'),
        comments: require('./profile/comments.png'),
    },
    image1: require('./image1.jpg'),
    image2: require('./image2.jpg'),
};

export default images;

ビューで、次のように画像コンポーネントをインポートする必要があります。

import Images from './img/index';

render() {
    <Image source={Images.profile.comments} />
}

誰もが目的を達成するためのさまざまな手段を持っています。自分に最も合ったものを選んでください。

ダマン-Q：この答えは変数をどのように使用していますか？

requireはリテラル文字列のみを受け入れるため、変数、連結文字列などは使用できません。これが次善策です。はい、まだ多くの作業がありますが、OPの質問に似たことができます。

render() {
  var images = { test100: "image100" };
  return (
    <View>
      <Text>
       test {images["test" + "100"]}
      </Text>
    </View>
  );
}
57
DerpyNerd

JSでは、ステートメントはバンドル時に解決されます（JSバンドルが計算されるとき）。したがって、変数式をrequireの引数として配置することはサポートされていません。

リソースが必要な場合は、さらに注意が必要です。 require('./someimage.png')がある場合、React Native packagerは必要な画像のロケールを設定し、アプリと一緒にバンドルされるため、次の場合に「静的」リソースとして使用できます。アプリは実行中です（実際、開発モードではアプリに画像がバンドルされませんが、代わりにサーバーから画像が提供されますが、これは問題ではありません）。

ランダムリソースを静的リソースとして使用する場合、そのイメージをバンドルするようアプリに指示する必要があります。いくつかの方法でそれを行うことができます：

1）アプリの静的アセットとして追加し、<Image src={{uri:'name_of_the_image_in_assets.png'}}/>で参照します（ here はネイティブiOSアプリに追加する方法です）

2）すべての画像を静的に事前に要求します。次の形式のSth：

var randomImages = [
    require('./image1.png'),
    require('./image2.png'),
    require('./image3.png'),
    ...
];

次に、あなたのコードで次のことができます：

<Image src={randomImages[Math.floor(Math.random()*randomImages.length)]}/>

3）<Image src={{uri:'http://i.imgur.com/random.jpg'}}/>でネットワークイメージを使用する

32
kzzzf

動的な方法で画像を追加する方法を探してこのスレッドに来ました。 Image-> require（）に変数を渡すことが機能しないことがすぐにわかりました。

正しい道を歩んでくれたDerpyNerdに感謝します。

リソースを1か所に実装した後、イメージを簡単に追加できることがわかりました。しかし、アプリケーションの状態の変化に基づいてこれらの画像を動的に割り当てる方法が必要でした。

状態値から文字列を受け取り、その文字列に論理的に一致する画像を返す関数を作成しました。

セットアップ

画像構造：

app  
  |--src
    |--assets
      |--images
        |--logos
          |--small_kl_logo.png
          |--small_a1_logo.png
          |--small_kc_logo.png
          |--small_nv_logo.png
          |--small_other_logo.png

        |--index.js
    |--SearchableList.js

index.jsには、これがあります：

const images = {
  logos: {
    kl: require('./logos/small_kl_logo.png'),
    a1: require('./logos/small_a1_logo.png'),
    kc: require('./logos/small_kc_logo.png'),
    nv: require('./logos/small_nv_logo.png'),
    other: require('./logos/small_other_logo.png'),
  }
};

export default images;

SearchableList.jsコンポーネントで、次のようにImagesコンポーネントをインポートしました。

import Images from './assets/images';

次に、コンポーネントに新しい関数imageSelectを作成しました。

imageSelect = network => {
  if (network === null) {
    return Images.logos.other;
  }

  const networkArray = {
    'KL': Images.logos.kl,
    'A1': Images.logos.a1,
    'KC': Images.logos.kc,
    'NV': Images.logos.nv,
    'Other': Images.logos.other,
  };

  return networkArray[network];
};

次に、コンポーネントのrender関数で、この新しいimageSelect関数を呼び出して、this.state.networkの値に基づいて目的の画像を動的に割り当てます。

render() {
  <Image source={this.imageSelect(this.state.network)} />
}

もう一度、私を正しい道に導いてくれたDerpyNerdに感謝します。この答えが他の人の役に立つことを願っています。 :)

1
Ryan S
class ImageContainer extends Component {
   this.state ={
     image:require('default-img')
   }
    <View>
           <Image source={this.state.image} />
    </View>
}

この議論の文脈で、特定の背景に画像を動的に割り当てたいというケースがありました。ここでこのように状態を変更します

this.setState({
  image:require('new-image')
})
0
Arausi Daniel