Можно ли предотвратить первый рендер и перейти к componentDidMount? - PullRequest
Новая
       19

Можно ли предотвратить первый рендер и перейти к componentDidMount?

1 голос
/ 03 августа 2020

У меня есть список со списком записей. при нажатии каждой записи пользователь будет перенаправлен на страницу с подробными сведениями. когда пользователь возвращается на страницу списка, страница списка должна сохранять свою позицию прокрутки (т.е. пользователь должен перейти к той же записи, на которой он нажал). Мой FlatList выглядит так, как показано ниже, 

   <FlatList
       ref={ref => this.flatListRef = ref}
       data={equipmentsList}
       renderItem={({ item, index }) => this.renderEquipments(item, index)}
       keyExtractor={item => item.id.toString()}
       onScroll={(e) => this.handleScroll(e)}
    />

каждый раз, когда пользователь прокручивает страницу, позиция прокрутки сохраняется с использованием метода onScroll для использования позже 

    onScroll={(e) => this.handleScroll(e)}

вот handleScroll метод 

     handleScroll(event) {
        this.setState({ scrollPosition: event.nativeEvent.contentOffset.y });
     }

А вот код для прокрутки FlatList в нужную позицию, когда пользователь возвращается со страницы сведений на страницу списка 

    componentDidMount() {
        this.flatListRef.scrollToOffset({ offset: scrollPosition, animated: false });
    }

Я делаю это в componentDidMount, потому что this.flatListRef доступен до тех пор, пока компонент не отобразит хотя бы один раз.

здесь проблема в том, что когда происходит первый рендеринг, FlatList рендерится без какой-либо позиции прокрутки, а затем при вызове componentDidMout FlatList рендеринг с позицией прокрутки (прокрутка к желаемому элементу списка). это поведение, по-видимому, заметно для пользователя, что рендеринг происходит дважды.

Здесь Мои сомнения: 1. Можно ли предотвратить первый рендеринг так, чтобы componentDidMount будет только отображать FlatList?

или

2. Есть ли альтернатива, чтобы поместить пользователя в ту же позицию прокрутки, когда он возвращается со страницы сведений на страницу списка?

Чт анк вас.

...