当列表大小很高时，FlatList 不稳定 - 本机反应

Question

我的应用程序的 react-native 版本是 0.51.0。

当 flatlist 大小不是那么大时，加载没有任何问题。 (figure_01).

但是当列表大小很大时（这里我的列表中有 55 个项目），它显示的是空行而不是值。 (figure_02).

我检查了列表项，没有任何空值或空项。并且还检查了更多设备。请帮我解决这个问题。提前致谢

figure_01

figure_02

<ScrollView style={Styles.scroll_main} contentContainerStyle={{flexGrow:1}} >
                <View style={Styles.container_listview}>

                    <FlatList
                        data={ this.state.flatListItems }
                        keyExtractor={this._keyExtractor}
                        ItemSeparatorComponent = {this.FlatListItemSeparator}
                        renderItem={

                                ({item}) => <View style={Styles.item_m_log}>
                                <Content style={Styles.model_container}>
                                    <TouchableWithoutFeedback>
                                        <View>
                                            <View style={{flexDirection: 'row'}}>
                                                <View style={Styles.txt_model_user_pro_view}><Text style={Styles.txt_model_m_log} uppercase={false}> •  Card Number </Text></View>
                                                <View style={Styles.txt_model_details_user_pro_view}><Text style={Styles.txt_model_details_m_log} uppercase={false}> : {item.cardNumber} </Text></View>
                                            </View>
                                          <View style={{flexDirection: 'row'}}>
                                                <View style={Styles.txt_model_user_pro_view}><Text style={Styles.txt_model_m_log} uppercase={false}> •  Vehicle Number </Text></View>
                                                <View style={Styles.txt_model_details_user_pro_view}><Text style={Styles.txt_model_details_m_log} uppercase={false}> : {item.vehicleNo}</Text></View>
                                            </View>
                                            <View style={{flexDirection: 'row'}}>
                                                <View style={Styles.txt_model_user_pro_view}><Text style={Styles.txt_model_m_log} uppercase={false}> •  Date/Time </Text></View>
                                                <View style={Styles.txt_model_details_user_pro_view}><Text style={Styles.txt_model_details_m_log} uppercase={false}> : {item.deviceTimeStamp}</Text></View>
                                            </View>
                                            <View style={{flexDirection: 'row'}}>
                                                <View style={Styles.txt_model_user_pro_view}><Text style={Styles.txt_model_m_log} uppercase={false}> •  Amount </Text></View>
                                                <View style={Styles.txt_model_details_user_pro_view}><Text style={Styles.txt_model_details_m_log} uppercase={false}> : {item.price} </Text></View>
                                            </View>
                                            <View style={{flexDirection: 'row'}}>
                                                <View style={Styles.txt_model_user_pro_view}><Text style={Styles.txt_model_m_log} uppercase={false}> •  Mileage  </Text></View>
                                                <View style={Styles.txt_model_details_user_pro_view}><Text style={Styles.txt_model_details_m_log} uppercase={false}> : {item.mileageKm}</Text></View>
                                            </View>
                                            <View style={{flexDirection: 'row'}}>
                                                <View style={Styles.txt_model_user_pro_view}><Text style={Styles.txt_model_m_log} uppercase={false}> •  Fuel Station </Text></View>
                                                <View style={Styles.txt_model_details_user_pro_view}><Text style={Styles.txt_model_details_m_log} uppercase={false}> : {item.stationName} </Text></View>
                                            </View>

                                        </View>
                                    </TouchableWithoutFeedback>
                                </Content>
                                </View>
                        }
                    />
                </View>
            </ScrollView>

Answer 1

问题出在 renderItem 方法内部使用的 Content 标签中，根据 native-base documentation 您只能在一个屏幕内使用一个 Content 标签，删除 Content 标签后列表将完美加载。而且您不必将 Flatlist 包裹在 ScrollView 周围，因为 flatlist 已经继承了 ScrollView 属性。

Answer 2

我在尝试使用大列表时遇到了同样的问题，它会呈现列表元素但没有显示它。

我的解决方案：

给列表项绝对高度
使用第三方插件，比如 flatlist

当列表大小很高时，FlatList 不稳定 - 本机反应

FlatList is not stable when list size is high - react native

react-native

react-native-flatlist