React Nativeでmapを使用した時、requireの中でその変数が使用できない。

Question

はじめまして。閲覧ありがとうございます。

只今react nativeを勉強しております。

mapで配列を回した時、対応している画像を読み込みたいと考えております。

その際何故か変数を読み込むことが出来ません。お力をいただけるとありがたいです。

--諸々省略

export default class App extends React.Component {

  render() {
    const sam = "a";
    const bottons = ["a","b","c","d"];
    return (
      <View>
      {bottons.map( (botton,index) => {
        return (
          <Image source={require(`./img/${botton}_botton.png`)} />
        );
      })}
      </View>
    );
  }
}

このようにbottonsの中身を挿れて
a_botton.png
b_botton.png
c_botton.png
d_botton.png
という順番で画像を出しいのですがなぜかエラーが出てしまいます。

--諸々省略

export default class App extends React.Component {

  render() {
    const sam = "a";
    const bottons = ["a","b","c","d"];
    return (
      <View>
      {bottons.map( (botton,index) => {
        return (
          <Image source={require(`./img/${sam}_botton.png`)} />
        );
      })}
      </View>
    );
  }
}

これなら
a_botton.png
はきちんと表示されます。(b,c,d)も変更して試してみましたので、画像はあります。

<Text></Text>
の中に入れるときちんと表示されるのですが・・・
アドバイスいただけると幸いです。

Answer 1

https://facebook.github.io/react-native/docs/images#static-image-resources
https://stackoverflow.com/questions/30854232/react-native-image-require-module-using-dynamic-names
こちらで確認できますが、残念ですが require() でご要望のことはできません

面倒ですが、一つ一つ定義するのがよろしいかと思われます

Comments

[s-wakita]

ご返信有難うございます！
出来ないんですね・・・！URLも見させていただきました。
一つ一つ定義していこうと思います！

Answer 2

こちらの記事を私は参考にしました！

 "img": require("../../assets/img/destinations/001.png")

こんな感じに書いてましたよ！