Question

我的应用程序的本机版本是0.51.0。

平面列表的大小不是很高时，它正在加载而没有任何问题。 （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

当我尝试使用大列表时，我遇到了同样的问题，它将呈现list元素但不显示它。

我的解决方案：

将绝对高度赋予列表项
使用第三方插件，例如平板列表

列表大小较大时FlatList不稳定-反应本机

1 个答案: