отложенной загрузки динамических изображений изображение

Question

Я собирание изображения из JSON и хотите загрузить его в lazyimageload

renderRow = (file) => { 
    var imageURL = require(file.image_url); 
    return <View 
     style={styles.view}> 
     <LazyloadView 
      host="listExample" 
      style={styles.file}> 
      <LazyloadImage 
        host="listExample" 
        style={styles.image} 
        source={imageURL} 
        animation={false}/> 
      <View style={styles.detail}> 
       <Text style={styles.name}>{file.first_name} {file.last_name}</Text> 
       <Text><Text style={styles.title}>email: </Text><Text style={styles.email}>{file.email}</Text></Text> 
       <Text style={styles.ip}><Text style={styles.title}>last visit ip: </Text>{file.ip_address}</Text> 
      </View> 
      <View style={styles.gender}> 
       <Text style={[styles.genderText, file.gender === 'Male' ? styles.male : styles.female]}>{file.gender}</Text> 
      </View> 
     </LazyloadView> 
    </View>; 
}; 

Но получить исключение «нуждающейся неизвестные модули» ./images/image.png. если вы уверены, что там есть модуль, попробуйте перезапустить упаковщик или запустить npm install. Может ли кто-нибудь помочь?

Answer 1

Вы не можете динамически извлекать локальные изображения с требованием. Причина заключается в том, когда упаковщик сталкивается с require, он пытается связать этот файл с вашим приложением. Он не может связывать изображение, если путь является динамическим. Чтобы загрузить динамическое изображение, вам нужно либо вытащить его из сети, либо если у вас есть определенный набор изображений, которые могут быть использованы, вы можете использовать require каждый, а затем использовать вывод этого require в зависимости от информации, переданной в.

const image1 = require('./image1.png'); 
const image2 = require('./image2.png'); 
{...} 
render() { 
    return (
     <Image source={aRandomBool ? image1 : image2} /> 
    ); 
} 

исх: https://facebook.github.io/react-native/docs/images.html#static-image-resources