时间戳

首页 > 解决方案 > 将动态 URL 传递给 require()

android - 将动态 URL 传递给 require()

问题描述

我需要遍历我的产品数组，然后将数据作为道具传递，但是对于我的图像 url，我不能这样做，控制台会向我显示以下内容：

invalid call at line 21 require(this.props.img)

这是我的代码： app.js

export default class App extends React.Component {
  state = {
    products: [
      {
        id: 1,
        details: 'this is a macbook',
        image: '../Images/macbook.jpg',
        price: '1000$',
      },
      {
        id: 2,
        details: 'this is a PS4 pro',
        image: '../Images/ps4pro.jpeg',
        price: '500$',
      },
      {
        id: 3,
        details: 'this is a beats',
        image: '../Images/beats.jpeg',
        price: '200$',
      },
    ]
  }

  showProds = () => {
    let prods = [];
    for (let i = 0; i <= this.state.products.length - 1; i++) {
      prods.push(<Product details={this.state.products[i].details} img={this.state.products[i].image} />)
    }
    console.log(prods);
    return prods;
  }

  render() {
    return <ScrollView>
      {this.showProds()}
    </ScrollView>
  }
}

产品组成

export default class Product extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <View style={styles.card}>
                <View style={styles.prod}>
                    <Text style={styles.prod_details}>{this.props.details}</Text>
                    <Image style={styles.img} source={require(this.props.img)} />
                </View>
                <View style={styles.btn}>
                    <TouchableOpacity>
                        <Text style={styles.btn_text}>Delete</Text>
                    </TouchableOpacity>
                </View>
            </View >
        )
    }
}

我是反应原生的新手。我也尝试在我的循环中使用 require 但没有运气。

任何帮助，将不胜感激。

标签： androidreactjsreact-nativeandroid-studio

解决方案

更改您的 products.image，使其采用以下格式：

products: {
   ...
   image: require('.../Images.image.jpeg'),
   ...
}

然后将图像源更改为：

<Image style={styles.img} source={this.props.img} />

推荐阅读