美文网首页
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初始化位置

    需求: 进入列表之前传入需要定位到的Item的ID,进入列表要将该Item设置为可见的第一条数据 注意:由于我的I...

  • React Native02——FlatList

    FlatList 在RN0.43版本中引入了FlatList,SectionList与VirtualizedLis...

  • ReactNative之FlatList-列表入场动画

    FlatList-列表入场动画 前言 网上查找资料:RN FlatList入场动画,竟然一个都没搜索到,而且还是百...

  • ReactNative FlatList列表Item入场动画

    FlatList-列表入场动画 前言 网上查找资料:RN FlatList入场动画,竟然一个都没搜索到,而且还是百...

  • RN FlatList使用

    FlatList类似于Android中的ListView或者RecyclerView,主要用于列表的绘制,允许横向...

  • React Native-分类列表

    RN自学阶段,用FlatList写了一下分类页面,话不多说,直接上代码

  • 关于RN组件Flatlist

    需要特殊注意的一点是: 必须要加唯一key。官方是 使用函数 _keyExtractor = (item, ind...

  • RN-FlatList-使用

    本文内容1、flatList的简单使用2、flatList属性的使用、介绍

  • RN FlatList组件使用

    FlatList类似于Android中的ListView或者RecyclerView,或者Object-c的UIT...

  • RN_0.59.9_FlatList

    RN更新太快,很多方法都改变了,实时记录一下 FlatList 的用法,如图: demo: 1、 使用 FlatL...

网友评论

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

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