как загрузить изображение из переменной в React Native - PullRequest
Новая
       104

как загрузить изображение из переменной в React Native

0 голосов
/ 20 июня 2020

хорошо, сначала я добавляю в корзину, так как я это делаю, передаю необходимые данные в качестве параметра функции, а затем отправляю данные на 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]}) и получил почти аналогичную ошибку

кто-нибудь знает, что делать, заранее спасибо

1 Ответ

0 голосов
/ 20 июня 2020

Проблема в том, что вы пытаетесь выполнить динамическое c требование, которое не работает. Поэтому лучше всего запросить и использовать его заранее.

Допустим, ваш массив такой. 

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

вам нужно будет изменить его на 

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

И используйте его, как показано ниже 

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

Обновление после изменения вашего вопроса

Вы пытаетесь потребовать и сохранить в хранилище asyn c для выше решение для работы, вы можете сделать, как показано ниже. Сначала вам нужно будет создать объект со всеми вашими изображениями, он будет действовать как модуль со всеми изображениями. 

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