Question

我有一个本机应用程序，它从外部源下载图像并将它们保存到专用的本地缓存文件夹中。之后，它们会以不同的视图显示。图片最初在应用包中不可用。

<Image source={{uri: uri}} resizeMode="contain" style={style} />

我使用URI格式作为引用本地文件夹的Image组件的源输入参数。我也将宽度和高度作为样式传递，实际上在绘制之前图像大小始终是已知的。它适用于iOS但不适用于Android。

正如文档所述，我应该对Android上的本地图像使用require（＆＃39;＆＃39;）。这适用于静态图像，但不适用于在运行时下载。

有人知道如何解决这个问题？

以下是代码：

class CachedImage extends React.Component {
    state = {
        uri: null
    }

    async _handleCache(source) {        
        const path = `${RNFetchBlob.fs.dirs.CacheDir}${sha1(source.uri).toString()}.jpg`;        
        const exists = await RNFetchBlob.fs.exists(path);
        if (exists) {
            this.setState({uri: path});                
        } else {
            // encoding the file to preserve proper URL transmition
            await RNFetchBlob
                .config({path})
                .fetch("GET", source.uri, {});
            this.setState({uri: path});
        }
    }

    componentWillMount() {
        this._handleCache(this.props.source).done();
    }

    render() {
        const { style } = this.props;

        if (this.state.uri != null) {            
            return (                
                <Image source={{uri: this.state.uri}} resizeMode="contain" style={style} />
            );
        }
        return(
            <View style={style}/> //todo: display activity while loading ...
        );
    }
}

用法：

<CachedImage
   style={{width: _width , height: _height}}
   source={{uri: 'http://...'}} />

Answer 1

导入此包

import { StyleSheet, Image, Dimensions } from 'react-native';

像这样渲染图像

<Image source={{uri: uri}} style={styles.image} />

在底部添加此样式

const styles = StyleSheet.create({
    image: {
        width: Dimensions.get('window').width,
        height: Dimensions.get('window').width / 2
    }
});

如果有任何问题写下来，这应该有效！

使用uri作为源的图像未显示

1 个答案: