イメージタグ付きリユーザブルボタン

Question

このセクションを再利用可能なコンポーネントにしたいので、同じことを5回書く必要はありません。私が手

<ImgButton 
    onPress={console.log("pressed")} 
    img={'../img/button_australia.png'} 
    /> 

次のように

<TouchableOpacity onPress={console.log('pressed')}> 
    <Image 
    source={require('../img/button_australia.png')} 
    /> 
</TouchableOpacity> 

私はこれを反映するために作られた新しいコンポーネントは次のとおりです。

import React from 'react'; 
import { Image, TouchableOpacity } from 'react-native'; 

const ImgButton = ({ onPress, img }) => { 

return (
    <TouchableOpacity onPress={onPress}> 
    <Image 
     source={require(img)} 
    /> 
    </TouchableOpacity> 
); 
}; 

export { ImgButton }; 

私はこのコードのブロックでそれを呼び出し、このコンポーネントImgButtonをインポートした後エラー：「不明なモジュールを要求しています../img/button_australia.png」「

私はウィロンgの文字列を小道具として渡すときに、私が見た例から、私が何をしたかに何が間違っているかはわかりません。ありがとう:)

Answer 1

this react-native issueで説明したように、動的に生成される名前を持つアセットまたはjavascriptモジュールはありません（例：require）。変数。

これは、Reactネイティブパッケージャがrequire（およびimport）ステートメントを使用してコンパイル時にモジュールとアセットバンドルを生成するため、変数の値がわからないためです。

最も簡単な方法は、単に直接成分に画像ソースを渡すことである。

<ImgButton 
    onPress={console.log("pressed")} 
    img={require('../img/button_australia.png')} 
/>