【React Native】Imageコンポーネントのsourceプロパティの値に変数を使用したい

Question

前提・実現したいこと

タイトルの通り

render() {
    const image_ref = "./images/penguin.jpg";
    return (
      <View style={{flex:1,alignItems:"center",justifyContent:"center"}}>
        <Image
          source={require(image_ref)}
          style={{width:50,height:50}}
        />
      </View>
    );
  }

このような記述で画像を表示したいのですができません。

<Image
  source={require("./images/penguin.jpg")}
  style={{width:50,height:50}}
/>

ちなみにこのように記述したときはしっかりと画像が表示されます

発生している問題・エラーメッセージ

Error: Module ./images/penguin.jpg
not declared as a 
System.registerdynamic
dependency of module://App.js.js

このようなエラーが出てしまいます。

教えていただきたいこと

したがって、imageコンポーネントのsourceプロパティの値に変数を使用する方法を教えていただきたいです。
また代替法があればそちらを教えていただきたいです。
よろしくお願いします。

Answer 1

const path = require("./images/penguin.jpg")

//renderメソッド内で
<Image
  source={path}
  style={{width:50,height:50}}
/>