RN Image 不能显示 https 图片处理

最新推荐文章于 2024-08-15 04:09:27 发布

原创最新推荐文章于 2024-08-15 04:09:27 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #reactnative #Android

RN 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何在React Native中处理RNImage组件无法显示HTTPS图片的问题。通过使用react-native-fetch-blob库将HTTPS图片转换为Base64编码，从而实现显示。详细步骤包括配置请求选项和读取文件为Base64字符串。

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,
    },
})