延遲加載動態畫面圖像

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