Question

我的应用程序中的组件如果被分配了直接字符串值（“someImage.png”），它可以正常工作，但如果我尝试通过将图像名称存储在局部变量中来分配它，则会给出此异常“require（）必须有一个字符串文字参数“ 这条线很好用

<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，但还没有人回答。你能帮帮我吗？

Answer 1

此动态图像示例还可以显示如何使用图像源值正确分配变量。建议将整个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

希望有所帮助

Answer 2

如果您在数据中有索引，那么我对此问题的处理方法是：

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]} />

Answer 3

这是我经常使用的辅助组件：

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;

使用Image导入as RNImage用于避免重复声明错误。

然后

import Image from '<path>';

<Image name="your-image-name" />

这使您能够在新的source组件中使用Image作为道具，以防您需要使用URI而不是相对路径。与你需要传递的任何其他道具一起。

从那里，您可以访问getImage组件，而无需将其导入应用中的多个组件。

希望这有帮助！

Answer 4

//-将图像路径转换为数组列表

   indexImag = [
    require("./img/KPN48-01.jpg"),
    require("./img/KPN48-02.jpg"),
    require("./img/KPN48-03.jpg")
  ];

//-数据Feed-

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
    }
  ];

//-渲染-

 <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>

Answer 5

如果您有两个以上的选择，那么解决方案是将require的结果作为参数传递，而不是在方法中执行require（param）。

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

require（）必须有一个字符串文字参数React Native

5 个答案: