ReactNative с Redux - Плоский список scrollToEnd - PullRequest
Новая
       20

ReactNative с Redux - Плоский список scrollToEnd

0 голосов
/ 06 мая 2018

Мне нужно прокрутить компонент FlatList до конца после получения новых данных (в моем случае - новых сообщений). Я пытался использовать setTimeout и т. Д., А FlatList никогда не прокручивался. Я использую избыточную архитектуру, и у меня нет доступа к setState методу, который я никогда не вызываю это вручную.

Я использую connect метод: 

export default connect(
    (state: IAppState) => mapPropsToState(state.chat),
    mapPropsToDispatch
)(Chat)

Состояние: 

export interface IChatState {
    messages: Message[]
}

Где и когда я должен вызывать scrollToEnd метод.

1 Ответ

0 голосов
/ 10 мая 2018

Theres свойство onEndReached для плоских списков, как показано ниже: 

 <FlatList
  onEndReached={this.handleEnd}
  onEndReachedThreshold={Platform.OS === 'ios' ? 0 : 0.5} />
 </Flatlist>

Затем создайте метод для обработки end, я использую метод, который добавит +1 к моей текущей странице, а затем извлечет данные в другом методе, который заполнит список: 

 handleEnd = () => {
    this.setState({
        page: this.state.page + 1,
    }, () => this.fetchData());
}

Если вы хотите, чтобы ваш список добавил больше информации, то просто объедините список, вот мой метод извлечения (я использую состояние, но в приставке работает то же самое) 

 this.setState({
                data:[...this.state.data, ...res.results],
                error:res.error || null,
                loading:false,
                refreshing: false,
               });

И таким образом вы добавляете больше информации в список, надеюсь, это вам поможет!

...