react-native FlatFlist 只渲染第一屏

Question

问题描述

react-native开发中，使用FlatList 渲染列表，大部分情况下能够正常渲染，偶尔会出现列表滑动区域变得很长，但是只渲染了第一屏的数据的，之后的数据都不在渲染了。

问题出现的环境背景及自己尝试过哪些方法

改变生成 item 的key的方法，保证每个item 的key唯一，打印发现，数据的条数是正确的，但是超出一屏之后renderitem方法不在执行了。

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

_renderItem = (item:any) => {
        console.log('the current item-->' + JSON.stringify(item));
        const itemHeight = (item.item.sectionStart === true)? 75: 55;
        return (<View key={item.item.key} style={{width: '100%', height: itemHeight}}>
                    {this.renderItemSeparator(item)}
                    {('New' === item.item.firstLetter) ?
                    <FriendItem key={item.item.UID} showRightItem={true} item={item} newFriendState={item.item.status} listItemSelected={this.onListItemClick.bind(this,item)} acceptNewFriend={this.acceptNewFriend.bind(this,item)}/>
                    : <FriendItem key={item.item.UID + item.item.key} showRightItem={false} item={item} listItemSelected={this.onListItemClick.bind(this,item)}/>}
                </View>);
    }

    renderItemSeparator(item:any){
        let isApplyFriends = ('New' === item.item.firstLetter);
        if((item.item.sectionStart === true) && (isApplyFriends === true)){

            //1、好友申请记录
            console.log('好友申请记录==========>');
            return (<View  key={"floder"} style={{width: '100%',height: 20, flexDirection: 'row',alignItems: 'center', justifyContent: 'space-between',backgroundColor: '#f7fafb'}}>
                            <Text style={{color: '#999999', fontSize: 14,paddingLeft: 15}}>{i18n.t(LangId.FRIENDS_LIST_SUBTITLE)}</Text>
                            <TouchableOpacity style={{backgroundColor: 'transparent',width: 40, paddingRight:15, height: '100%', justifyContent: 'center',alignItems: 'flex-end'}} onPress={()=>this.newFriendsSectionUnfold()}>
                                <Image style={{width: 12, height:7, transform:[{scaleY: this.state.scaleValue}] }} source={require('../../../../assets/img/friend/sanjiao.png')}/>
                            </TouchableOpacity>
                        </View>);
        }
        if(item.item.sectionStart === true){

            //2、普通分组
            console.log('好友普通分组==========>'+item.item.firstLetter);
            return (<Text key={"label"+item.item.UID} style={styles.sectionView}>{item.item.firstLetter}</Text>);
        }
    }

你期待的结果是什么？实际看到的错误信息又是什么？

无论如何滑动，列表的数据都能正常渲染出来。