アプリケーションに直接文字列値( "someImage.png")が割り当てられていれば正常に動作するコンポーネントがありますが、ローカル変数に画像名を保存して割り当てようとすると、この例外が発生します "require()must have単一の文字列リテラル引数」この行は正常に動作します
<ImageBackground source={require("./Resources/bg/imageone.png")} resizeMode='cover' style={customStyles.backdrop}>
この場合に問題が発生します
let imageName = "./Resources/bg/imageone.png";
<ImageBackground id="123" source={require(imageName)} resizeMode='cover' style={customStyles.backdrop}>
here と報告された同じ問題も見つかりましたが、まだ誰も答えていません。ここで私を助けてもらえますか?
この動的画像の例は、画像ソースの値を変数に正しく割り当てる方法も示しています。推奨事項は、値だけではなく、変数にrequire
全体を割り当てることです。
// GOOD
<Image source={require('./my-icon.png')} />;
// BAD
var icon = this.props.active ? 'my-icon-active' : 'my-icon-inactive';
<Image source={require('./' + icon + '.png')} />;
// GOOD
var icon = this.props.active
? require('./my-icon-active.png')
: require('./my-icon-inactive.png');
<Image source={icon} />;
https://facebook.github.io/react-native/docs/images.html
それが役に立てば幸い
データにインデックスがある場合、問題に対する私のアプローチは次のとおりです。
const image1 = require('../assets/images/image1.png');
const image2 = require('../assets/images/image2.png');
const image3 = require('../assets/images/image3.png');
const images = [image1, image2, image3];
...
<Image source={images[index]} />
私がよく使用するヘルパーコンポーネントを次に示します。
_import your-image-name from '<path-to-image>';
const images = {
your-image-name,
};
getImage = name => images[name];
export default getImage;
_
次に、コンポーネント内で画像が必要です:
_import getImage from '<path>';
<Image source={getImage('your-image-name')} />
_
ヘルパー関数内に画像をインポートすると、require()
を使用する必要がなくなります。
そこから、すべての画像をgetImage
コンポーネントにインポートできます。
さらに一歩進めたい場合は、Image
を小道具として取り込む新しいname
コンポーネントを作成できます。例えば:
_import { Image as RNImage } from 'react-native';
import getImage from '<path>';
const Image = ({ name, source, ...props }) => (
<RNImage
source={name ? getImage(name) : source}
{...props}
/>
);
export default Image;
_
_as RNImage
_を使用してImage
をインポートすると、重複宣言エラーを回避できます。
それから
_import Image from '<path>';
<Image name="your-image-name" />
_
これにより、相対パスの代わりにURIを使用する必要がある場合に、新しいsource
コンポーネント内でImage
を小道具として使用することもできます。あなたが渡す必要がある他の小道具と一緒に。
そこから、アプリ内の複数のコンポーネントにインポートすることなく、getImage
コンポーネントにアクセスできます。
お役に立てれば!
//-画像パスを配列リストに変換します
indexImag = [
require("./img/KPN48-01.jpg"),
require("./img/KPN48-02.jpg"),
require("./img/KPN48-03.jpg")
];
//-データフィード -
dataFeed = [
{
id: 1,
title: "Koisuru Fietune Cookie คุกกี้เสี่ยงทาย",
subTitle: "128,136,082 views",
imgId: 0
},
{
id: 2,
title: "BNK48 - คุกกี้เสี่ยงทาย Koisuru Fortune Cookie Cover",
subTitle: "328,006,000 views",
imgId: 1
},
{
id: 3,
title: "คลาสเด็ก - คุกกี้เสี่ยงทาย - BNK48 - Koisuru Fortune Cookie",
subTitle: "334,111,234 views",
imgId: 2
},
{
id: 4,
title:
"เชิญชวนมาร่วมถ่าย MV BNK48 Koisuru Foutune Cookie คุกกี้เสี่ยงทาย",
subTitle: "100,000,055 views",
imgId: 0
},
{
id: 5,
title:
"หนุ่มๆ ฟินทั้งประเทศ! ฟังเพลงฮิต คุกกี้เสี่ยงทาย อีก 3 เวอร์ชั่นจากวงพี่สาว ",
subTitle: "400,143,634 views",
imgId: 1
}
];
//-render--
<View>
<View>
<Image
source={require("./img/LogoPP.png")}
/>
<View>
<Text>{_item.textTitle} </Text>
<Text>{_item.subTitle} </Text>
</View>
</View>
<Image
source={this.indexImag[_item.imgId]}
/>
</View>
3つ以上の選択肢がある場合の解決策は、メソッド内でrequire(param)を実行する代わりに、requireの結果をパラメーターとして渡すことです。
render() {
return (
<ScrollView>
{this.renderMenuItem("CATALOGO", require('../../img/hp_catalogo.jpg'), this.goToCatalogo)}
{this.renderMenuItem("NOVITÀ PRODOTTI", require('../../img/hp_novita.jpg'), this.goToNovita)}
</ScrollView>);
}
renderMenuItem(name, imagePath, func ){
return (
<TouchableOpacity onPress={func} style={styles.box}>
<ImageBackground
source={imagePath}
style={styles.image}>
<Text>{name}</Text>
</ImageBackground>
<TouchableOpacity>);
}