在 React Native 中成功获取后图像无法渲染答案

【问题标题】：Image fails to render after successful fetch in React native在 React Native 中成功获取后图像无法渲染
【发布时间】：2018-11-16 22:20:03
【问题描述】：

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

看起来相当简单，一切正常，除了图片无法渲染。

在我的构造函数中：

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 中没有看到任何黄色消息或错误，但我没有看到成功获取的图片。图片无法渲染的原因可能是什么？

【问题讨论】：

你能显示照片的uri，以及styles.policeCarIcon的样式吗？如果样式中没有给出高度和宽度，那么这可能是个问题。
抱歉，我在一分钟前回复了之前的用户...然后回复者删除了包含我的答案/回复的答案。我忘了为policeCarIcon 添加高度和宽度。我会尝试立即更新这篇文章。感谢您的回复。你肯定知道问题出在哪里。

标签： image react-native render

【解决方案1】：

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

【讨论】：