problem description
in react-native development, using FlatList rendering list can render normally in most cases. Occasionally, the sliding area of the list becomes very long, but only the data of the first screen is rendered, and then the data is no longer rendered.
the environmental background of the problems and what methods you have tried
change the method of generating the key of item to ensure that the key of each item is unique. Print found that the number of pieces of data is correct, but the renderitem method is no longer executed after a screen is exceeded.
related codes
/ / Please paste the code text below (do not replace the code with pictures)
_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: "-sharpf7fafb"}}>
<Text style={{color: "-sharp999999", 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>);
}
}what result do you expect? What is the error message actually seen?
No matter how you slide, the data of the list will render normally.