Отображение изображений из Reaction-native-fetch-blob? - PullRequest
Новая
       34

Отображение изображений из Reaction-native-fetch-blob?

0 голосов
/ 06 сентября 2018

Моя цель - иметь возможность кэшировать изображения с помощью response-native-fetch-blob. Моя проблема заключается в попытке прочитать источник путиact-native-fetch-blob в компоненте React Native Image. На экране ничего не отображается, и я рассмотрел несколько вопросов и вопросов, связанных с переполнением стека и GitHub, но я не могу найти решение. Это для Android.

Я считаю, что могу правильно хранить свои изображения в каталоге файлов. Я запускаю код storeImages () ниже, и у него есть метод RNFetchBlob.fs.exists (), который возвращает true при проверке пути к файлу. Приведенный ниже код запускается внутри моего файла избыточности в другом вызове API. Для получения изображения в соответствии со значением schedule_id требуется информация из избыточного объекта.

storeImages () в Redux 

function storeImages(obj){
    let picDir = RNFetchBlob.fs.dirs.PictureDir;
    //Run first for the Card Image
    RNFetchBlob.config({
        fileCache : true,
        //is appendExt necessary? I tried both and nothing displayed
        // appendExt : 'jpg',
        path: ${picDir}/${obj.schedule_id}BG
        })
        .fetch('GET', `${obj.cardImage}`, {
        })
        .then((res) => {
            let status = res.info().status;
            RNFetchBlob.fs.exists(res.path())
            .then((res) => {
                console.log(res);
            })
            if(status == 200) {
            // the temp file path
            console.log('The file saved to ', res.path())
        }
        })
    .catch((errorMessage, statusCode) => {
        console.log(errorMessage);
    })

Я также импортирую React Native Fetch Blob в свой компонент, а затем использую тот же путь изображения, и идентификатор расписания в строке поступает из компонента контейнера. Поскольку это вызов API, который сохраняет изображение, я использую RNFetchBlob.fs.exists (), чтобы проверить, был ли файл сохранен. Это возвращает true и отображает изображение в атрибуте источника. Я использую URI, потому что путь к изображению создается динамически.

render () в моем компоненте 

render() {
    let picDir = RNFetchBlob.fs.dirs.PictureDir;
    let imgPath= `${picDir}/${this.props.assetData[0].schedule_id}BG`;

    return(
        // Max height and width of screen
        <View style={{ position: 'absolute', top: 0, left: 0, height, width, zIndex: 1 }}>
            {
            RNFetchBlob.fs.exists(${picDir}/{${this.props.assetData[0].schedule_id}BG) 
            ?
                <Image source={{ uri: imgPath}} resizeMode='cover' style={{flex: 1}} />
            :
                null
            }
        </View>
    )
}

Дайте мне знать, если у вас есть вопросы ко мне.

...