延迟加载动态图像图像

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

但是收到异常"需要未知模块"./图像/图像.png"。如果您确定该模块在那里，请尝试重新启动打包程序或运行 npm install。任何人都可以帮忙吗

Answer 1

不能使用 require 动态拉取本地映像。原因是当打包程序遇到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