FlatList нестабилен, когда размер списка велик - реагировать нативным

Нативная версия моего приложения — 0.51.0.

Когда размер flatlist не так велик, он загружается без проблем. (figure_01).

Но когда размер списка велик (здесь у меня 55 элементов в списке), вместо значений отображаются пустые строки. (figure_02).

Я проверил элементы списка, и нет никаких нулевых значений или пустых элементов. А также проверил с большим количеством устройств. Пожалуйста, помогите мне решить эту проблему. заранее спасибо

цифра_01

figure_01

цифра_02

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>

react-native react-native-flatlist
person Kasun Gamage    schedule 07.09.2018    source источник
comment
Попробуйте упростить и просто показать ‹Текст›содержимое‹/Текст› для каждого элемента. Я предполагаю, что одно из ваших подполей имеет значение null, что вызывает ошибку и возвращает значение null для средства визуализации для этой ячейки.   -  person Mike M    schedule 07.09.2018
comment
Вы пытаетесь визуализировать объект FlatList много раз ScrollView -> FlatList -> ScrollView. Ознакомьтесь с этим решением для оптимизации Flatlist.   -  person Pritish Vaidya    schedule 14.09.2018

Ответы (2)


arrow_upward
2
arrow_downward

Проблема заключается в теге Content, который используется внутри метода renderItem, согласно документации по собственной базе вы можете использовать только один тег содержимого внутри экрана, удалите тег содержимого, и список загрузится идеально. А также вам не нужно оборачивать Flatlist вокруг ScrollView, поскольку flatlist уже наследует реквизиты ScrollView.

person Hirantha Leshan    schedule 14.09.2018

arrow_upward
0
arrow_downward

У меня такая же проблема, когда я пытаюсь использовать большой список, он отображает элемент списка, но не отображает его.

Мое решение:

  1. Дайте абсолютную высоту элементу списка
  2. Используйте сторонний плагин, например, flatlist
person Aurangzaib Rana    schedule 20.10.2018