代码之家 › 专栏 › 技术社区 › Kasun Gamage

当列表大小为高-本地时,平面列表不稳定

react-native-flatlist react-native

Kasun Gamage · 技术社区 · 7 年前

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

当 平面列表 尺寸不是很高,装载时没有任何问题。 (图01) .

但是当列表大小很高时(我在列表中有55项),它显示的是空行而不是值。 (图02) .

我检查了列表项,没有任何空值或空项。同时也检查了更多的设备。提前谢谢

图01

<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>

2 回复 | 直到 7 年前

Hirantha Leshan 6 年前

问题在renderItem方法内部使用的Content标记中,根据 native-base documentation 你只能在一个屏幕内使用一个内容标签,删除内容标签和列表将加载完美。而且你也不必把平面列表包装在一个ScrollView上,因为平面列表已经继承了ScrollView的属性。

Blue 6 年前

我的解决方案:

为列表项指定绝对高度