Image 图片不在平面列表中渲染，但在打开模式时显示在中

我正在尝试在平面列表中渲染一组图片。当前，呈现页面时不会显示图片。但是，当我点击屏幕上图片应该在的位置时，它会正确地打开一个模式，允许我查看图片。为什么图片不会出现在平面列表中，而是出现在模式中

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

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

componentWillMount（）{
apiService.getAlarmList（）。然后（（res）=>{
log（'NotificationHistory:componentWillMount:getAlarmList:res:'，res'）；
for（设i=0；i

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}
    />);
}

renderCameraHistory（）{
返回（{
//log（'NotificationHistory:renderCameraHistory:item:'，item，index）；
//console.log（'这是呈现平面列表'，item.image）；
如果（item.image！==null）{
返回(
此.renderSingleHistory（项，索引）
);
}
}}
//因为我们使用的是索引（ints），所以需要首先将它们转换为字符串
keyExtractor={（项，索引）=>index.toString（）}
//keyExtractor={（项）=>item.path}
//这需要唯一的键，但是当前数组具有同一项的多个副本
//item.key应该可以工作，但仍然可以
//extraData={this.state.toggleRefresh}
/>);
}

包含平面列表组件

然后通过下面的函数渲染每张图片。单击图片时，将打开一个模式，并显示更大版本的图片，以及关闭模式并返回图片列表的按钮

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

renderSingleHistory（项目）{
const dateNTime=项['date-time']；
const dateArr=dateNTime.split（“”）；
const dateOnly=dateArr[0]；
const timeOnly=dateArr[1]；
const logoPic=Config.images.homeIcon；
const picForFlatList=item.image；
报税表（
{
这个.getBigPicture（项目）；
}}
>
{item.serial}
{dateOnly}
{timeOnly}
);
}

---

附加说明：如果我使用静态图像作为源，则会呈现静态图像的平面列表，但是，当我单击图像时，位于阵列内部的图片将加载到模式中（我希望加载到平面列表中的图片）

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

我通过这个发现了这一点