延迟加载动态画面图像

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