如何在本机反应中从变量加载图像

Question

好的，首先我要添加到购物车，我这样做的方式是将必要的数据作为参数传递给函数，然后在我的购物车页面上将数据发送到asyncstorage（包括图像）来自asyncstorage 并显示物品的名称和价格，但显示图像是一个问题 这是它在代码中的样子：

<TouchableOpacity
    style={styles.button}
     onPress={() =>
      add(
      'Furts Camera',
       require('../resources/Cameras.jpg'),
       '10,00.00',
      )
    }>
  <Text style={styles.cart}>Add To Cart</Text>
  </TouchableOpacity>

那么函数如下所示：

  const addcart = async (n, p, pr) => {
    statenum = statenum + 1;
    try {
      await AsyncStorage.setItem('cart', JSON.stringify({y: statenum}));
      getcartnum();
      let items = await AsyncStorage.getItem('items');
      stateitems = JSON.parse(items);
      if (stateitems.name == '') {
        await AsyncStorage.setItem(
          'items',
          JSON.stringify({name: n, pic: p, price: pr}),
        );
      } else {
        newname = stateitems.name + '|' + n;
        newpic = stateitems.pic + '|' + p;
        newprice = stateitems.price + '|' + pr;
        await AsyncStorage.setItem(
          'items',
          JSON.stringify({name: newname, pic: newpic, price: newprice}),
        );
      }
    } catch (e) {
      console.log(e + 'first error');
    }
  };

这就是我在屏幕上显示信息的方式：

const getcartitems = async () => {
    let items = await AsyncStorage.getItem('items');
    stateitems = JSON.parse(items);
    cartitemsfunc(items);
    console.log('sjsjs' + cartitems);
  };
  getcartnum();
  const views = [];
try {
    let red = JSON.parse(cartitems);
    console.log('this is red' + red);
    let splitname = red.name.split('|');
    let splitpic = red.pic.split('|');
    let splitprice = red.price.split('|');
for (let i = 0; i < cartnumpass; i++) {
views.push(
 ...
Image source={splitpic[i]} style={styles.image} />
...
)
}
}catch(e)
{
console.log(e)
}

然后在返回：

 <View style={styles.main}>
     {views}        
  </View>

如果我提醒 splitpic[i] 它显示 56（即当我将 require('../resources/Cameras.jpg') 作为参数传递时） 如果我只传递 '../resources/Cameras.jpg' 作为参数，它会提醒字符串，但是当它显示以下错误时：

我什至尝试过这样做：require({splitpic[i]}) 并得到了几乎类似的错误

有人知道该怎么做，在此先感谢

Answer 1

问题是您正在尝试执行不起作用的动态要求。所以最好的方法是预先要求并使用它。

假设你的数组是这样的。

const splitpic=['imagessource1','imagesource2'];

你必须把它改成

const splitpic=[require('imagessource1'),require('imagesource2')];

然后像下面这样使用它

<Image source={splitpic[i]} style={styles.image} />

问题更改后更新

您正在尝试要求并存储在异步存储中，为了使上述解决方案能够正常工作，您可以执行如下操作。您必须首先创建一个包含所有图像的对象，这就像一个包含所有图像的模块。

const resources = {
  Camera :require('../resources/Cameras.jpg')
};

add(
      'Furts Camera',
       'Camera',
       '10,00.00',
      )

检索后，您可以执行以下操作。通过使用地图，您可以简单地要求图像。

const getcartitems = async () => {
    let items = await AsyncStorage.getItem('items');
    stateitems = JSON.parse(items).map(x=>{x.pic=resources[x.pic];return x;});
    cartitemsfunc(items);
    console.log('sjsjs' + cartitems);
  };