2015-11-25 14 views
12

反応ネイティブで静止画像を使用するには、具体的にその画像に必要な処理を行う必要がありますが、数値に基づいてランダム画像をロードしようとしています。たとえば、私のディレクトリにimg1.png - img100.pngという100個のイメージがあります。私は、次の画像ファイルのネイティブ使用変数に反応する

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

私は意図的にこれは動作しません知っているが、いずれかの回避策をいただければ幸いを行う方法を把握しようとしています。

+0

これを実装しようとしましたか?イメージへのファイルパスが存在する限り、なぜこれが機能しないのか理解できません。 RN0.14以降、イメージパスからイメージを直接要求できるので、このメソッドは機能するはずです –

+0

問題を解決しましたか? – Rahul

答えて

19

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

リソースが必要な場合は、それはさらに難しくなります。 require('./someimage.png')がある場合、React Nativeパッケージャはロケールに必要なイメージを表示し、アプリケーションと一緒にバンドルされるので、アプリが実行されているときに「静的」リソースとして使用できます(実際にはdevモードではバンドルされませんあなたのアプリではなく、画像がサーバーから提供されますが、これはあなたのケースでは関係ありません)。

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

1)は、その後、あなたのアプリケーションの静的な資産としてそれを追加<Image src={{uri:'name_of_the_image_in_assets.png'}}/>とそれへの参照(hereあなたは)ネイティブiOSアプリに追加する方法である

2 )すべてのイメージを静的に前向きにする必要があります。次に、あなたのコード内であなたが行うことができます

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

:の形でSTH

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

3)が反応し、ネイティブ獣を知ってもらう人にとって<Image src={{uri:'http://i.imgur.com/random.jpg'}}/>

+1

何千ものimage1.png、image2.png、image3という名前の画像があるとします。pngなど - それは本当に変わっているようですが、requireは可変パスを受け入れず、そのrandomImages配列を作成するためのループを書くことができません。千本を書くように強制されないだろうか?変数をrequire行に渡そうとすると、モジュールが見つからないと不平を言う。 – headwinds

17

とネットワークイメージを使用して、これは助けてください:)

私は過去にいくつかのサイトにも行きましたが、ますますイライラしています。私がthis site hereと読むまで。

これは別のアプローチですが、最終的に最終的には払い戻しを行います。 基本的には、すべてのリソースを1か所にロードするのが最善の方法です。 次のような構造にindex.js

app 
    |--img 
     |--image1.jpg 
     |--image2.jpg 
     |--profile 
      |--profile.png 
      |--comments.png 
     |--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} /> 
} 

誰もが持っています最終的には別の手段、ちょうどあなたに合ったものを選んでください。

+0

素敵で最後に働くソリューション! :) – Magico

+1

私は助けることができてうれしい;) – DerpyNerd

関連する問題