ReactNative [Flatlist] scrollToOffset，我如何计算点击行的偏移位置？答案

【问题标题】：ReactNative [Flatlist] scrollToOffset, how do I figure out offset position of clicked row?ReactNative [Flatlist] scrollToOffset，我如何计算点击行的偏移位置？
【发布时间】：2017-09-29 20:28:45
【问题描述】：

我希望 FlatList 中的一行在用户单击它时滚动到屏幕顶部。我目前正在使用scrollToIndex 方法执行此操作，但问题是我必须为上边距设置动画（从 10 到 0）以使其刷新到屏幕顶部。我还有一个问题，如果用户单击一行以展开该行，并且前一行已经展开，前一行将折叠，导致原始 scrollToIndex 动画到屏幕顶部的某个位置。

我目前的两种选择是在前一行完成收缩后触发额外的scrollToIndex，或者使用scrollToOffset 根据良好的旧数学值确定滚动到的位置。有没有办法在点击时通过索引或其他值来计算行偏移位置？

感谢任何人提供的任何帮助！

【问题讨论】：

标签： react-native scroll react-native-flatlist

【解决方案1】：

我仍然使用scrollToIndex 方法并使用viewOffset 参数来计算要添加到方法中的偏移量，而不是试图找出滚动到的位置：任何其他当前展开的项目（如果有）的展开高度和折叠高度之间的差值，减去单击项目的上边距。

【讨论】：

您好，有什么方法可以计算 viewOffset 因为我在不同设备之间看到不一致
@Yasir，viewOffset 可以是项目位置。

【解决方案2】：

您可以使用 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 件事

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

所以这是一个示例 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
            })

【讨论】：