React Nativeのrequireで変数は使えない！

auです。

次のスクリーンに画像パスを渡して画像を表示しようとしたのですが、うまく行かなかったのでメモで残そうと思います。

ちなみにアプリはクイズのようなアプリを想定していて、正解なら○、不正解なら×の画像を表示します。

前のスクリーンのボタンからデータを渡しています。

できなかったパターン

const navigation = this.props.navigation;
const correctImage = require(navigation.state.params.imagePath);

結果

このままcorrectImageと言う変数をrequireの引数に渡すとエラーが起きるみたいです。

解決策

分岐させてあげればいい。

この際に、imagePathはtrueとfalseで判定されるので、パスを入力していた部分を「true」に変更しています。

const navigation = this.props.navigation;
const correctImage = navigation.state.params.imagePath ? 
require('./../../../image/correct.jpg') : require('./../../../image/incorrect.jpg');

今度はちゃんと表示することができました。