在React native中成功获取后,映像无法呈现

时间:2018-06-07 05:51:44

标签: image react-native render

我正在尝试渲染图像,这是成功获取的结果。

看起来相当简单,一切正常,但图片无法渲染。

在我的构造函数中:

constructor(props) {
        super(props);
        const deliveryManPic = Config.images.deliveryManPic;

        this.state = {
            callModal: false,
            beepModal: false,
            pictureForBackground: null,
            finished: deliveryManPic,
            secondPic: null,

        };
        this.batteryLevelIndicator = '';
        this.pictureUrl = 'someURL';
    }

在我的ComponentWillMount中:

componentWillMount() {
        const urlForPicture = this.pictureUrl;
        apiService.getPicture(urlForPicture, (res) => {
            if (res !== null) {
                // console.log('here is your response', res);
                this.setState({ pictureForBackground: res, });
            } else {
                loggingService.debug('theres been a problem');
            }
        });
    }

最后,在我的渲染方法中:

<View style={styles.deliveryGuyView}>
                        <Image
                            resizeMode="cover"
                            style={styles.policeCarIcon}
                            defaultSource={{ uri: this.state.finished }}
                            source={{ uri: this.state.pictureForBackground }}
                            onLoadEnd={() => {
                                console.log('pic has finished loading');
                            }}
                        />
                    </View> 

我在console.log中看不到任何黄色消息或错误,但我看不到成功获取的图片。图片无法呈现的原因是什么?

1 个答案:

答案 0 :(得分:0)

我忘了在PoliceCarIcon样式对象中添加高度和宽度。