ScrollView的最后一项在其上方的一项被删除时向上移动

Question

在ScrollView中，我有一个项目列表（一个项目的高度= 60像素）。
我实施了一次删除操作（将某项的marginBottom设置为从0到-60的动画）。
一切都很棒。

但是，当ScrollView 滚动到非常底部 时，出现了渲染问题。

期望：

• 滚动到最底端
• 删除一项（例如，最后一项之前的一项）
• 期望看到所有上方的项目全部落空以填补空白。最后一项不应移动。

现实：

• 滚动到最底端
• 删除一项（例如，最后一项之前的一项）
• 所有上方的项目将全部移动以填补空白，但也是如此，最后一个项目也是如此，从而在其后留有一个小的空白空间。请注意，一旦我尝试滚动，布局就会得到纠正（小的空白空间会消失）。

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>
    )
}