若干ハマったというか、これって駄目なの！？と思ったことがあったので備忘録としてまとめ。
頭の片隅ででも覚えておかないと、絶対私はもう一度やらかす。
ということで、今回は require() を使ってローカルにある画像を表示する時の注意点についてです。
一般的な書き方は下記のとおりです。
import { Image } from 'react-native';
<Image source={require('[表示したい画像のパス]')} />
で、躓いたのは require() に指定する画像のパスでした。
やってみて知ったのですが…パス指定の時って変数や文字列結合って使えないんですね！
最初はそれを知らなくて、何故画像表示がエラーになる？？となっていました。
そんな中、見つけたこちらの記事がとても参考になりました！
React Native で画像を require() する時の注意点 – Qiita
https://qiita.com/acro5piano/items/68314e30c565278ae4b4
こちらの記事によると、require() に指定できるのは文字列のみで、変数を代入したり、文字列結合したりするとエラーになるとのことでした。
サンプルコードは下記の通りです。
// OK
<Image source={require('[表示したい画像のパス]')} />
// エラー
const path = '[表示したい画像のパス]';
<Image source={require(path)} />
// エラー
const image = 'photo.png';
<Image source={require(`../../img/${image}`)} />
あと、実際に試してはいないのですが、下記のように文字列を シングルクォート ' ではなく、グレイヴ・アクセント ` で囲むようにしてもエラーになるとのことでした。
<Image source={require(`[表示したい画像のパス]`)} />
これは何故なんでしょう…？
ですが、require() 自体を変数に代入して使うのは OK みたいなので、画像パスを変数に代入して使う必要があるときには、下記のように require() ごと変数に入れてしまいましょう。
const image = require('[表示したい画像のパス]');
<Image source={image} />
以上、React Native で require() を使ってローカルにある画像を表示するときの注意点でした。
これは知らないとハマりますね…。
ご参考になれば幸いです。
