web-dev-qa-db-ja.com

require（）には単一の文字列リテラル引数が必要ですReact Native

アプリケーションに直接文字列値（ "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 と報告された同じ問題も見つかりましたが、まだ誰も答えていません。ここで私を助けてもらえますか？

javascriptimagereact-native
17
Zubair

この動的画像の例は、画像ソースの値を変数に正しく割り当てる方法も示しています。推奨事項は、値だけではなく、変数に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

それが役に立てば幸い

19
soutot

データにインデックスがある場合、問題に対する私のアプローチは次のとおりです。

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]} />
8
Onuray Sahin

私がよく使用するヘルパーコンポーネントを次に示します。

_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コンポーネントにアクセスできます。

お役に立てれば！

3
Chris Poe

//-画像パスを配列リストに変換します

   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>
1
Faisol Palavan

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>);
         }
0
Picci