RN FlatList的item高度不定时，如何精准定位

案例：

界面上部分横向滚动(Scrollview)的标题，下部分是内容列表(FlatList)，但是由于 flatlist 的item 高度不定，无法准确使用getItemLayout计算高度，导致无法使用scrollToIndex以及scrollToItem定位方法，而我的需求是：点击上部分的某个标题能准确跳转到某一个 item。

scrollToIndex()

scrollToIndex(params);

将位于指定位置的元素滚动到可视区的指定位置，当viewPosition 为 0 时将它滚动到屏幕顶部，为 1 时将它滚动到屏幕底部，为 0.5 时将它滚动到屏幕中央。

注意：如果不设置getItemLayout属性的话，无法跳转到当前渲染区域以外的位置。

---

scrollToItem()

scrollToItem(params);

这个方法会顺序遍历元素。尽可能使用scrollToIndex代替。

注意：如果不设置getItemLayout属性的话，无法跳转到当前渲染区域以外的位置。

scrollToOffset()

scrollToOffset(params);

滚动列表到指定的偏移（以像素为单位），等同于ScrollView的scrollTo方法。

案例UI

我的item 是 下面三种样式，肯定有童鞋想说为什么不用numColumns ={2}的属性设置，如果使用了这个，我无法控制一部分item上面的标题UI，当然，如果你可以，欢迎留言教教我

item的样式1

item的样式2

item的样式3

好了，上面说了这么多，就是想引出，下面如何动态计算高度，以及精准定位。

     {
          this.flatlist = view;
        }}
        initialNumToRender={3}
        data={dataArray}
        keyExtractor={(item, index) => index.toString()}
        renderItem={this.renderItem}
        ListHeaderComponent={this.renderHeader}
        onScroll={this.listScroll}
      />
     {
              this.myNavScrollTop = ref;
            }}>
            
              {title.map((item, index) => {
                return (
                   this.navSelect(index)}
                    activeOpacity={1}>
                    
                      {item}
                    
                    {navIndex == index ? (
                      
                    ) : null}
                  
                );
              })}
            
          

使用onLayout方法，计算每个item 的高度，存储起来

renderItem = rowData => {
    const {item, index} = rowData;
    const {
      hasMainTitle,
      field_title,
      rule_title,
      rule_desc,
      leftItem,
      rightItem,
    } = item;
    // console.log('rowItem-===', item);
    return (
       {
          // console.log('renderItem===', event.nativeEvent.layout.height);
          
          layoutText.push({
            height: event.nativeEvent.layout.height,
            index: index,
          });
        }}>
        {hasMainTitle && (
          
            
          
        )}

        {hasMainTitle && rule_title != '' ? (
          
            
          
        ) : null}
        {hasMainTitle && rule_desc != '' ? (
          
            
          
        ) : null}
        
          
          
        
      
    );
  };

点击上部分的title，使用scrollToOffset方法跳转定位到某个位置,由于每个title下的item数量不定，所以我之前存储过每个item 的行数 this.nums=[{index: 0,num: 12},...]，表示第1个title下，有12行数据

navSelect(index) {
    let layoutHeight = 0;
    let allLines = 0;
    this.nums.map((item, mapIndex) => {
      if (index > mapIndex) {
        allLines += item.num;
      }
    });
    layoutText.forEach((item, layoutIndex) => {
      if (allLines > layoutIndex) {
        layoutHeight += layoutText[layoutIndex].height;
      }
    });
    if (index == 0) {
      layoutHeight = 0;
    } else {
      layoutHeight = layoutHeight + px2dp(220);
    }

    console.log('layoutHeight==', layoutHeight);

    this.flatlist.scrollToOffset({offset: layoutHeight, animated: true});
}

到了这里，我这边就可以通过点击顶部title精准定位了！！！至此结束，欢迎各位童鞋多多指教，谢谢

本文部分内容摘自https://reactnative.cn/docs/flatlist/#scrolltoindex