需求:
进入列表之前传入需要定位到的Item的ID,进入列表要将该Item设置为可见的第一条数据
注意:由于我的Item高度不定,所以无法使用 scrollToIndex或者scrollToItem,只能使用scrollToOffset,于是我保存了item 的高度,如果你们是固定高度的item,就不用使用以下的步骤1、2,步骤3需要修改成 scrollToIndex({index: this.initIndex,...})、scrollToItem之类的
1、保存item 的高度
renderItem = rowData => {
return (
<View
onLayout={({ nativeEvent: e }) => {
console.log('onLayout===' + e.layout.height);
this.listItemHeight[index] = e.layout.height;
}}
>
{...}
</View>)
2、计算需要跳转的y
getAllHeight(index) {
let height = 0;
for (let i in this.listItemHeight) {
if (i < index) {
height = height + this.listItemHeight[i];
}
}
return height;
}
3、传入需要定位的index,调用计算需要跳转的offset值
onLayout() {
this.flatList &&
this.flatList.scrollToOffset({
offset: this.getAllHeight(this.initIndex),
animated: false
});
}
<View
style={{ flex: 1 }}
onLayout={() => {
this.onLayout();
}}
>
<FlatList
ref={ref => (this.flatList = ref)}
data={list}
keyExtractor={(item, index) => index.toString()}
renderItem={this.renderItem}
refreshing={false}
onEndReachedThreshold={0.3}
scrollEventThrottle={1}
/>
</View>
备注建议:由于是直接定位到某个元素,可能会出现白屏或者其他现象,可以使用windowSize,initialNumToRender等属性值进行优化
网友评论