ReactNative FlatList没有渲染某些项目

Question

我在我的react本机应用程序中使用FlatList来显示从api接收到的一些数据，包括图像URL，标题和描述。

问题是当我在完全渲染之前快速滚动它时，flatList不会渲染某些项目（意味着在显示所有内容之前）

这是我的flatList代码（JSX）：

 <FlatList
                style={{ paddingTop: 10 }}
                numColumns={2}
                showsVerticalScrollIndicator={false}
                keyExtractor={(item) => item.id.toString()}
                data={this.state.newsData}
                renderItem={(rowData) => this.renderWantAdsScreenFlatListItems(rowData.item, rowData.index)}
                extraData={this.state}


            />

状态：

state = {
    newsData: null,
    nextPageUrl: '',
    prePageUrl: '',
    counter: 0,
    pageNumber: 1,
}

和renderWantAdsScreenFlatListItems函数：

renderWantAdsScreenFlatListItems = (rowData, index) => {
    return <FlatListItem
        style={{ flex: 0 }}
        navigation={this.props.navigation}
        img={rowData.image}
        title={rowData.title}
        body={rowData.body}
        width={screenWidth / 2 - 30}
    />
}

然后我使用axios在componentDidMount中获取了数据：

componentDidMount() {

if (Platform.OS === 'android') {
    UIManager.setLayoutAnimationEnabledExperimental && UIManager.setLayoutAnimationEnabledExperimental(true);
}
LayoutAnimation.spring();

const { navigation } = this.props;
this.focusListener = navigation.addListener("didFocus", () => {
    if (this.state.counter === 0) {
        axios.get('api', {
        })
            .then((response) => {
                console.log(response);

                this.setState({
                    counter: 1,
                    newsData: response.data.data,
                    pageNumber: response.data.current_page,
                    prePageUrl: response.data.prev_page_url,
                    nextPageUrl: response.data.next_page_url,

                })
                console.log(response);
            })
            .catch(error => {
                console.log(error);
            })
            .finally(() => {
            });
    }
});

}

这是我的FlatListItem组件：

    import React, { Component } from 'react';
import { View, Text, StyleSheet, Image, TouchableOpacity } from 'react-native';
import { Fonts } from '../../Fonts/fonts';
class ListItem extends React.PureComponent {


    showDetail = () => {
        this.props.navigation.navigate('WantAdsDetailScreen', {
            image: this.props.img,
            title: this.props.title,
            body: this.props.body
        });
    }
    render() {
        const { img, title } = this.props;

        return (
            <TouchableOpacity
                onPress={this.showDetail}
            >
                <View
                    elevation={5}
                    style={[styles.container,
                    {
                        overflow: 'hidden',
                        borderColor: '#00cec9',
                        borderRadius: 5,
                        backgroundColor: "#F5FFFA",
                        margin: 10,
                        width: this.props.width,
                        height: this.props.width,

                        shadowColor: '#000000',
                        shadowOffset: {
                            width: 0,
                            height: 10
                        },
                        shadowRadius: 5,
                        shadowOpacity: 1.0 
 }
                    ]
}>

                    <Image
                        resizeMethod='resize'
                        source={{ uri: img }}
                        style={{
                            width: '100%',
                            height: '100%',
                            borderTopLeftRadius: 5,
                            borderTopRightRadius: 5,

                        }}
                    />
                    <View
                        style={{
                            position: 'absolute',
                            bottom: 0,
                            left: 0,
                            width: '100%',
                            flex: 1,
                            alignItems: 'center',
                            justifyContent: 'center',
                            backgroundColor: 'rgba(0,0,0,0.3)',
                            height: '18%',

                        }}
                    >
                        <Text
                            numberOfLines={1}
                            style={[styles.costTextStyle, {
                                fontSize: 16,
                                fontFamily: Fonts.IRANSans_Light,
                            }]}
                        >{title}</Text>
                    </View>

                </View>
            </TouchableOpacity >
        );
    }
}
const styles = StyleSheet.create({
    container: {
        justifyContent: 'flex-start',
        alignItems: 'center',
    },
    costTextStyle: {
        textAlign: 'center',
        margin: 4,
        fontFamily: Fonts.AsapCondensed,
        color: '#fff'
    }
});

export default ListItem;

谢谢：）