Question

我正在尝试在平面列表中渲染一堆图片。目前，在呈现页面时不会显示图片。但是，当我点击图片所在的屏幕时，它会正确打开一个模态，这样我就可以查看图片了。为什么图片不会出现在平面列表中，而是出现在模态中？

首先，我从后端获取我需要的数据

componentWillMount() {
    apiService.getAlarmList().then((res) => {
        console.log('NotificationHistory:componentWillMount:getAlarmList:res:', res);
        for (let i = 0; i < res.length; i++) {
            const thisHistory = res[i];
            thisHistory.image = null;
            thisHistory.idx = i;
            this.getItemImage(thisHistory.path, thisHistory.idx);
        }
        this.setState({ cameraHistory: res });
    });
}

this.state.cameraHistory现在有一个包含所有必要数据的数组。

renderCameraHistory() {
    return (<FlatList
        data={this.state.cameraHistory}
        renderItem={({ item, index }) => {                        
            // console.log('NotificationHistory:renderCameraHistory:item:', item, index);
            // console.log('this is rendering the flat list', item.image);
            if (item.image !== null) {
                return (
                    this.renderSingleHistory(item, index)
                );
            }
        }}
        //Because we're using the indexes(which are ints) we need to convert them to strings first
        keyExtractor={(item, index) => index.toString()}
        // keyExtractor={(item) => item.path}
        //this needs unique keys, however the current array has multiple copies of the same item
        //item.key is supposed to work, but still 
        //extraData={this.state.toggleRefresh}
    />);
}

包含flatlist组件。

然后通过以下功能渲染每张照片。单击图片时，会打开一个模态并显示更大版本的图片，同时还会显示一个关闭模态的按钮并返回到图片列表。

renderSingleHistory(item) {
    const dateNTime = item['date-time'];
    const dateArr = dateNTime.split(' ');
    const dateOnly = dateArr[0];
    const timeOnly = dateArr[1];
    const logoPic = Config.images.homeIcon;
    const picForFlatList = item.image;

    return ( 
    <View style={styles.cardView}>
        <View style={styles.pictureView}>
            <TouchableOpacity
                onPress={() => {
                    this.getBigPicture(item);
                }}
            >
                <View
                    style={{
                        width: 100,
                        height: 100,
                    }}
                >
                    <Image
                        source={{ uri: picForFlatList }}
                        style={{
                            resizeMode: 'contain'
                        }}
                    />
                </View>
            </TouchableOpacity>
        </View>
        <View style={styles.textView}>
            <View style={styles.topTextView}>
                <Text>{item.serial}</Text>
            </View>
            <View style={styles.bottomTextView}>
                <View style={styles.bottomLeftTextView}>
                    <Text>{dateOnly}</Text>
                </View>
                <View style={styles.bottomRightTextView}>
                    <Text>{timeOnly}</Text>
                </View>
            </View>
        </View>

    </View>
    );
}

附加说明：如果我使用静态图像作为源，则会渲染静态图像的平面列表，但是当我点击图像时，位于数组内的图片会被加载到模态中（图片中）我想加载到平面列表中）。

Answer 1

解决方案是在FlatList中使用ListEmptyComponent。由于状态没有立即更新，当调用renderItem方法时，初始对象不包含item.image（对后面进行了2次调用，因此需要一些时间）。因此，ListEmptyComponent充当占位符，直到状态完全更新并允许呈现某些内容而不是尝试呈现null。

我能够通过此post

发现这一点

图片不会在Flatlist中呈现，但会在打开模式时显示

1 个答案: