FlatList锚点scrollToIndex精准比例定位

1.测量需要滑动到的楼层位置

首先引入

import {

    UIManager,

    findNodeHandle

} from 'react-native';

再给组件加上引用

this.myComponent=ref

最后测量

UIManager.measure(findNodeHandle(this.myComponent),(x,y,width,height,pageX,pageY)=>{

                //tod

  })

2.初步理解FlatList滑动方法

scrollToIndex(params: object) 

Scrolls to the item at a the specified index such that it is positioned in the viewable area such that viewPosition 0 places it at the top, 1 at the bottom, and 0.5 centered in the middle.

如果不设置getItemLayout属性的话，可能会比较卡。

scrollToItem(params: object) 

Requires linear scan through data - use scrollToIndex instead if possible. 如果不设置getItemLayout属性的话，可能会比较卡。

scrollToOffset(params: object) 

Scroll to a specific content pixel offset, like a normal ScrollView.

3.scrollToIndex位置精确viewPosition

设导航条高度和吸顶Tab高度为一个固定值 paddingH

设FlatList的高度为一个固定值 flatListH

设第一步测出来的楼层高度为一个固定值 flatFloorH

设最终viewPosition的值为未知数R

列出一元一次方程

(flatListH * R - paddingH) / flatFloorH = R

求解出 R = paddingH/(flatListH - flatFloorH)

this.flatListView.scrollToIndex({viewPosition: R, index: index);