反应术[flatlist]滚动托架，我如何找出单击行的偏移位置

Question

我希望flatlist中的一行在用户单击时滚动到屏幕顶部。我目前正在使用scrollToIndex方法这样做，但是问题是我必须对顶部边距（从10到0）进行动画，以使其冲洗到屏幕顶部。我还遇到了一个问题，如果用户单击一行以展开行，并且已经扩展了上一行，则上一行将崩溃，从而导致原始的滚动图index，以使屏幕顶部的某个位置动画。

我目前的两个替代方案是触发额外的scrollToIndex，一旦上一行完成收缩或使用scrollToOffset来弄清楚基于良好的旧数学值滚动到哪里。是否有一种方法可以在单击时通过索引来确定行偏移位置？

感谢任何人都可以提供的任何帮助！

Answer 1

您可以使用scrolltoitem来实现您要实现的目标

所以假设您有此flatlist组件

<FlatList
        ref={(ref) => { this._flatList = ref; }}
        data = {dataSourche}
        renderItem = {(   info: {item:item, index:number}) => this._renderFlatListItem(info.item, info.index)}
        keyExtractor = {(item) => item.id}
        decelerationRate={0}
        snapToInterval={cardHeight}
        snapToAlignment={"start"} //Can also be 'center' or 'end'
        onMomentumScrollEnd = {(event) => this._onMomentumScrollEnd(event)}
        getItemLayout = {this.getItemLayout}/>

您将需要定义一个方法getItemlayout，该方法将告诉Flatlist 3件事

1. 长度：在您的情况下，卡的高度
2. 偏移：这是从列表顶部到当前卡的距离，通常我们可以将其设置为长度 *卡的索引
3. 卡的索引

所以这是一个示例getItemlayout，您可以参考

getItemLayout = (data, index) => (
        { length: 170, offset: 170 * index, index }
    );

接下来是您的flatlist scrolltoitem调用

this._flatList.scrollToItem({
                animated:true, //can also be false
                item:item, 
                viewPosition:0 //this is the first position that is currently attached to the window
            })

Answer 2

，而不是试图弄清楚在哪里滚动以使用scrollToOffset方法，我仍在使用scrollToIndex方法并使用viewOffset参数来计算要添加多少偏移方法：当前任何其他扩展项目（如果有）的扩展和折叠高度之间的差异并减去点击项目的最高边距。