RN Image 不能显示 https 图片处理

最新推荐文章于 2024-04-20 02:43:49 发布

暴走的小新

最新推荐文章于 2024-04-20 02:43:49 发布

阅读量1k

点赞数

分类专栏： RN 文章标签： javascript 前端 reactnative Android

本文链接：https://blog.csdn.net/pyaizhu/article/details/126889757

版权

RN 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

RN Image 不能显示https 图片，但是 http的能够正常处理。

方法: 1. 把https 直接改成 http （可能不行，可能可以，我碰到的不行）

方法: 2. 把https 转成base64 后显示（以下代码就是）

import React, {Component}from 'react';
import {Image, TouchableOpacity, StyleSheet,Platform} from 'react-native';
import {Actions}  from 'react-native-router-flux';
import RNFetchBlob from 'react-native-fetch-blob';

export default class GridItem extends Component {

    state = {
        base64Data: ''
    }

    componentDidMount() {
        const { item: { uri } } = this.props;
        if (!uri || uri.indexOf('https') === -1) {
            return;
        }

        RNFetchBlob.config(Platform.OS === 'android' ? {
                trusty: true,
                fileCache: true
            } : {fileCache: true})
            .fetch('GET', uri)
            .then((resp) => {
                return resp.readFile('base64')
            })
            .then(base64Data=> {
                this.setState({
                    base64Data: 'data:image/png;base64,' + base64Data
                })
            })
    }

    _selectPhoto = () => {

        const {item, selectPhoto} = this.props
        selectPhoto(item)
    }

    _deletePhoto = () => {

        const {item, deletePhoto} = this.props
        deletePhoto(item)
    }

    _ManagePhotos = ()=> {
        const {item, deletePhoto} = this.props
        console.log(item)
        Actions.ManagePhotos({item: item, deletePhoto: deletePhoto});
    }

    render() {
        let props;
        let { item } = this.props
        let isAddPhoto = item.uri.indexOf('photo_add') !== -1;
        if (isAddPhoto || item.uri.indexOf('https') === -1) {
            props = this.props;
        } else {
            props = Object.assign({}, this.props, {item: {uri: this.state.base64Data}});
        }
        return <TouchableOpacity onPress={isAddPhoto?this._selectPhoto:this._ManagePhotos}>
            {isAddPhoto ?
                <Image source={require('./img/photo_add.png')} style={styles.photo}/> :
                <Image source={{uri: props.item.uri}} style={styles.photo}/>
            }
        </TouchableOpacity>
    }
}


const styles = StyleSheet.create({
    photo: {
        height: 80,
        width: 80,
        marginRight: 4,
    },
})