リアクションネイティブの静止画像と可変パス

Question

私はmap（） loopを私の主なコンポーネントの中に入れています。render（）機能。

<ScrollView>  
    {this.state.items.map((item, i) => { 
     return(
     <MyItem key={i} item={item} /> 
     ) 
    })} 
</ScrollView> 

とコンポーネントのレンダリング（）機能：

<View> 
    <Text>{this.props.item.title}</Text> 
    <Image source={require('../relative_path_to_image/' + this.props.item.imageName + '.png')} 
</View> 

私はそれを行う場合、私はエラーを取得するこの方法：「のモジュールが存在する...何とか何とかを確認してください」

私はそれを次のようを行う場合、私は同じエラー取得：

を

render(){ 
    var imageSource= require('../relative_path_to_image/' + this.props.item.imageName + '.png'); 

    return (
    <View> 
     <Text>{this.props.item.title}</Text> 
     <Image source={imageSource} 
    </View> 
) 
} 

と私は（下記参照）ハードコードさでそれを書いた場合、パスすべてが正常を作品！

var imageSource= require('hardcoded_path_to_image.png'); 

このように、おそらくrequire（）関数を使ってループ内に画像をレンダリングする方法が必要になるでしょう。私はそれがすべてのアプリに公正な必要性だと思う、なぜ期待どおりに動作していないのですか？

Answer 1

イメージの動的パスを要求することはできません。イメージパスは静的である必要があります。静的パスをコンポーネントに渡すことをお勧めします。例えば

：

class BlaBlaBla extends Component { 
 
    constructor() { 
 
    this.state = { 
 
     myPicsArray: [ 
 
     require('path/to/some/image'), 
 
     require('path/to/someAnother/image'), 
 
     require('path/to/someAnotherAnother/image') 
 
     ] 
 
    } 
 
    } 
 
    
 
    render() { 
 
    <ScrollView>  
 
    {this.state.items.map((item, i) => { 
 
     return(
 
     <MyItem key={i} item={item} /> 
 
     ) 
 
    })} 
 
    </ScrollView> 
 
    } 
 
}