В ScrollView у меня есть список элементов (высота элемента = 60 пикселей).
Я реализовал пролистывание для удаления (анимируя marginBottom элемента от 0 до -60).
Все круто
Однако у меня возникает проблема рендеринга, когда ScrollView прокручивается до самого нижнего .
Expectation:
- Прокрутка до самого низа
- Удалить элемент (скажем, предыдущий)
- Ожидайте увидеть все элементы выше все это спустится вниз, чтобы заполнить пустой пробел. Последний элемент не должен двигаться.
Reality:
- Прокрутка до самого дна
- Удалить элемент (скажем, предыдущий)
- Все элементы выше все это перемещаются, чтобы заполнить пустой пробел , но так же, как и последний, в результате чего сразу после него образуется небольшое пустое пространство. Обратите внимание, что макет исправлен (это небольшое пустое пространство исчезает), как только я пытаюсь прокрутить.
Код ScrollView:
_deleteContact(contactId: number) {
Animated.timing(this.state['marginBottom' + contractId], {toValue: -60}).start();
}
_renderRows = () => {
return this.state.contacts.map(contact => (
<Animated.View key={contact.id} style={{flex: 1, flexDirection: 'row', marginBottom: this.state['marginBottom' + contact.id]}}>
<ContactComponent contact={contact} onDelete={() => this._deleteContact(contact.id)}/>
</Animated.View>
));
};
render() {
return (
<ScrollView styles={{flex: 1}}>
{this._renderRows()}
</ScrollView>
)
}