RN FlatList初始化位置

需求:

进入列表之前传入需要定位到的Item的ID,进入列表要将该Item设置为可见的第一条数据

注意:由于我的Item高度不定,所以无法使用 scrollToIndex或者scrollToItem,只能使用scrollToOffset,于是我保存了item 的高度,如果你们是固定高度的item,就不用使用以下的步骤1、2,步骤3需要修改成 scrollToIndex({index: this.initIndex,...})、scrollToItem之类的

1、保存item 的高度
renderItem = rowData => {
    return (
       {
          console.log('onLayout===' + e.layout.height);
          this.listItemHeight[index] = e.layout.height;
        }}
      >
    {...}
)
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
      });
  }
 {
            this.onLayout();
          }}
        >
           (this.flatList = ref)}
            data={list}
            keyExtractor={(item, index) => index.toString()}
            renderItem={this.renderItem}
            refreshing={false}
            onEndReachedThreshold={0.3}
            scrollEventThrottle={1}
          />
        

备注建议:由于是直接定位到某个元素,可能会出现白屏或者其他现象,可以使用windowSize,initialNumToRender等属性值进行优化

你可能感兴趣的:(RN FlatList初始化位置)