json - url路径连接的JSX语法？

问题描述

我目前正在使用此架构获取 url：

    [
      {
        "idp": 457,
        "nom": "Promo du jour",
        "nomcat": "Poissonnerie",
        "idc ": 4,
        "nomt": "reduction",
        "idt": 3,
        "ancienprix": 5.99,
        "nouveauprix": 2.99,
        "image": "/uploads/imagepromo/1530792725.jpg",
        "datedebut": "2018-07-05",
        "datefin": "2018-07-06",
        "color": "calm-bg",
        "produit": "Sardines",
        "nombrearticlegratuit": null,
        "nombrearticleachete": null,
        "pourcentage": null,
        "unite": "kg",
        "remarque": null,
        "libre": null
      },{
        "idp": 457,
        "nom": "Promo du jour",
        "nomcat": "Poissonnerie",
        "idc ": 4,
        "nomt": "reduction",
        "idt": 3,
        "ancienprix": 5.99,
        "nouveauprix": 2.99,
        "image": "/uploads/imagepromo/1530792725.jpg",
        "datedebut": "2018-07-05",
        "datefin": "2018-07-06",
        "color": "calm-bg",
        "produit": "Sardines",
        "nombrearticlegratuit": null,
        "nombrearticleachete": null,
        "pourcentage": null,
        "unite": "kg",
        "remarque": null,
        "libre": null
}]

我正在将 JSON 映射到基于本机的 listItems 中，并且在里面我有一个带有源路径的图像；我的路径看起来像这样：

var path =' http://example.fr/promoapp/public/promo/ '+item.image

映射元素的代码：

<List dataArray={this.state.items} renderRow={
            (item) => <ListItem itemDivider={false} style={{ flexDirection: 'column' }} key={item.id} onPress={() => this.handleNav(item.name, 'Belgique', item.price, item.image)}>
              {this.cardRenderer(item)}
            </ListItem>

carRender() 的代码：

cardRenderer(item) {


        switch(item.nomt){
              case 'reduction':{
                var urlImage = `http://seedup.tn/promoapp/public/promo'.${item.image}`
                //Reactotron.log(urlImage)

              } return (

                <Card padder style={{ flex: 1, flexDirection: 'column', backgroundColor: CardColor[item.nomcat], }} >
                <View style={{ alignItems: 'center', justifyContent: 'center', marginBottom: 10, }}>
                  <Text style={{ fontSize: 18, color: 'white' }}>{item.nomcat}</Text>
                </View>

                <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
                  <Text style={{ fontSize: 18, color: 'white', marginLeft: 15 }} >{item.produit}</Text>
                  {Reactotron.log(urlImage)}
                  <Image source={{uri: urlImage}} style={{ width: Math.round(Layout.window.width / 2), height: Math.round(Layout.window.width / 2), marginRight: 15, marginBottom: 5 }} />
                </View>

                <View style={{ width: Layout.window.width, height: 1, backgroundColor: 'white', }} /> {/* white line */}

                <View style={{ flexDirection: 'row', }}>

                </View>
                <View style={{ flex: 1, alignItems: 'center', }}>
                  <Text style={{ fontSize: 18, color: 'white' }}> {item.ancienprix}€&lt;/Text>
                  <Text style={{ fontSize: 18, color: 'white' }}> description</Text>
                </View>

              </Card>
              )

      }

但我没有得到图像，一旦我记录了路径变量，它就是空的。

我尝试了所有可能的 ES6 组合，但没有？

关于如何实现这一目标的任何帮助？

标签： jsonreactjsreact-nativesyntax

json - url路径连接的JSX语法？

问题描述

解决方案

推荐阅读