Прокрутка FlatList после добавления нового элемента

Question

Я использую компонент FlatList ReactNative, и он работает отлично. Теперь я хочу прокрутить его вниз, когда пользователь вводит новый элемент / комментарий.

<FlatList style={styles.commentList}
    data={commentList}
    keyExtractor={(item, index) => index}
    renderItem={this.renderRow.bind(this)}
/>

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

Answer 1

Проверьте это: это не мое решение, но я начал работать, используя этот метод.

https://exp.host/@xavieramoros/snack-SyN4FJikz Исходный код: https://github.com/xavieramoros/flatlist-initialScrollIndexIssue/blob/master/App.js Expo 22 - 0,49 руб.

Большое спасибо https://expo.io/@xavieramoros

Отредактировано: если вы просто хотите прокрутить вниз, тогда scrollToEnd ( https://facebook.github.io/react-native/docs/flatlist.html) доступен в новом RN. используйте это как

<FlatList
        ref={ (ref) => { this.flatList = ref; }}
        data={this.data}
        renderItem={ this.renderItem }
        keyExtractor={ this.keyExtractor}
        onScroll={ this.scrollToEnd}
      />
    ......

и в вашем методе

scrollToEnd = () => {
    const wait = new Promise((resolve) => setTimeout(resolve, 0));
    wait.then( () => {
        this.flatList.scrollToEnd({ animated: true });
    });
}

Answer 2

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