美文网首页
RN FlatList初始化位置

RN FlatList初始化位置

作者: liluo风 | 来源:发表于2020-05-29 10:31 被阅读0次

    需求:

    进入列表之前传入需要定位到的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等属性值进行优化

    相关文章

      网友评论

          本文标题:RN FlatList初始化位置

          本文链接:https://www.haomeiwen.com/subject/defxzhtx.html