レスポンスネイティブでイメージを取得するときに補間された文字列を使用しない場合は、

Question

イメージのコンポーネントをReact Nativeのバックグラウンドとして使用しています。

const ImageWrapper = (props) => { 
     return (
     <Image source={require('../../../images/testingImages/cells.png')} style={styles.imageView}> 
      {props.children} 
     </Image> 
    ); 
    }; 

しかし、私はそう小道具によって提供された画像の名前の補間文字列を必要と提供したいと思います：

require(`../../../images/testingImages/${props.imgURL}`) 

をしかし、私は（そうする時はいつでも、私は作成する場合でも、 ES6を使用せずに文字列を別の変数として指定し、requireに渡します）。エラーが発生しました -

"未知の名前のモジュール../../../images/testingImages/cells.png '"です。

不要な画像は不要ですか？バックグラウンドを変更したいときにコンポーネントを再利用できるように、イメージURLを小道具として渡すことができれば幸いです。

ご協力いただきありがとうございます。

Answer 1

私は同じ問題を抱えていたので、他の誰かがあなたの正確な問題を解決できたらうれしいことですが、私の回避策はsourceの値全体を小道具として渡すことでした。私はシナリオ内のリスト内の各マップの特定のキーの値としてそれを持っていたので、それは私のために十分にきれいでした。しかし、それはちょうど問題をあなたの場合のレベルまで動かすかもしれません。

Answer 2

問題が解決するかどうかはわかりませんが、画像がネットワーク経由で利用できる場合は、ベースURLを使用して画像のURLを作成し、そのURLを直接ソースとして使用できます。ここでは、デモのチェックここでhttps://rnplay.org/apps/hEYzcA

Answer 3

については

var fileName = "trolltunga.jpg"; 
var imagesBaseUrl = "https://www.w3schools.com/css/"; 
var image = imagesBaseUrl+fileName; 
const imageURL = {url:image} 

class App extends React.Component { 
render() { 
return (
    <Image source={imageURL} style={styles.imageView}> 
</Image> 
); 
} 
} 

は、私は、ラウンドそれが特異的ではない、本当に完璧な答えを得たが、私の目的あちこちにどのように動作するかです。私はコンポーネントがロードされ、したがって文字列が渡されるように補間する機会を得られないときにrequireが呼び出されると思います。だからではなく、私は画像ラッパーの親コンポーネントに関連するイメージをインポート：

：

import jungle from '../../images/jungle.jpg'; 

そして、そして、画像ソース・コンポーネントにこの小道具を渡す

<ImageWrapper image={jungle} /> 

ラッパー

画像に小道具として渡します

<Image source={this.props.image} style={styles.imageView}> 
      { this.props.children } 
</Image>