Как установить индикатор обновления FlatList в React Native?

Я пытаюсь установить индикатор обновления плоского списка в react native, но не знаю, как это сделать. Просмотр списка имеет эту опору:

refreshControl={<RefreshControl
                        colors={["#9Bd35A", "#689F38"]}
                        refreshing={this.props.refreshing}
                        onRefresh={this._onRefresh.bind(this)}
                    />
                }

Но в Flat List есть только это:

refreshing={this.props.loading}
onRefresh={this._onRefresh.bind(this)}

react-native android react-native-flatlist
person AhmadReza Saboor    schedule 13.08.2017    source источник
comment
Решение по этой ссылке работает, пожалуйста, проверьте эту ссылку .   -  person bamne123    schedule 23.01.2018

Ответы (2)


arrow_upward
36
arrow_downward

Я нашел решение! Это может быть пустышка, но у FlatList также есть опора под названием refreshControl, такая как ListView, но я просто не тестировал ее! Именно так:

 <FlatList
    refreshControl={<RefreshControl
                    colors={["#9Bd35A", "#689F38"]}
                    refreshing={this.props.refreshing}
                    onRefresh={this._onRefresh.bind(this)} />}
 />
person AhmadReza Saboor    schedule 14.08.2017
comment
Я сейчас тоже использую это решение, оно работает, но меня беспокоит, что это неправильный подход. Я буду исследовать еще раз в будущем и сообщу вам. Пожалуйста, обновите, если вы также обнаружите. - person Noitidart; 25.09.2017
comment
Я считаю, что FlatList построен на основе ScrollView или ListView, потому что все они построены на этой вещи VirtualizedList. Я вижу их как обертки с разными API и для разных целей. Общим аспектом является то, что они обрабатывают большие списки. Я думаю, что решение, опубликованное для этого ответа выше, является правильным. Кроме того, я думаю, что это ответ Оккама Razer. RefreshControl - это в значительной степени просто перехватчик этого события (жест вытягивания, когда scrollY = 0), поэтому, если он вызывается, все в порядке. - person agm1984; 11.11.2018
comment
добавить tintColor в качестве опоры для ios. В противном случае его работа отлично - person Manjeet Singh; 26.07.2019

arrow_upward
1
arrow_downward

Вы можете передать renderScrollComponent компоненту FlatList с тем же компонентом RefreshControl, который вы показали выше. Я создал для этого выставочную закуску: https://snack.expo.io/rJ7a6BCvW

FlatList использует VirtualizedList внутри себя, а для компонента VirtualizedList требуется renderScrollComponent: https://facebook.github.io/react-native/docs/virtualizedlist.html#renderscrollcomponent

person dotcomXY    schedule 13.08.2017
comment
Я пробовал это, но это не сработало! Объект не является функцией (оценка this.props.renderScrollComponent (this.props)) - person AhmadReza Saboor; 14.08.2017
comment
Я тоже пробовал это. Я не уверен, что это правильно, потому что кажется, что он меняет весь компонент прокрутки. Не только контроль обновления. Я буду исследовать больше в будущем, пожалуйста, обновите, если вы сделаете какие-либо открытия или очень уверены в методе renderScrollComponent. - person Noitidart; 25.09.2017