React Native ScrollView滚动锚定到指定元素（个人分享）功能：不通过onlayout和滚动位置计算

功能：

不通过onlayout和滚动位置计算获取某一个元素的位置并滚动

调研方案

通过绑定onlayout事件监听元素在y轴的位置然后再根据滚动的高度计算元素的位置实现滚动
如果知道展示的index可以通过一个方法展示
我们这边实现的方案是直接用ref然后获取元素的pageY，跳转

注意

collapsable={false}一定要加不然拿不到

关键代码

import {
  UIManager,
  findNodeHandle,
} from 'react-native';

this._nodes = new Map();

  scrollToElement = (indexOf) => {
    UIManager.measure(findNodeHandle(this._nodes.get('key')), (x, y, width, height, pageX, pageY) => {
      this.myScroll.scrollTo({ x: 0, y: pageY, animated: true });
    });
  };
  
  
  <ScrollView
  removeClippedSubviews={false}
  ref={(view) => {
    this.myScroll = view;
  }}
  style={styles.container}
>
    <View collapsable={false} key={'key'} ref={(ref) => this._nodes.set('key', ref)} style={styles.formTitleBox}>
        <Text
          style={{
            fontSize: 28,
            color: '#FFFFFF',
            fontWeight: 'bold',
          }}
        >
          key
        </Text>
      </View>
     <TouchableOpacity
        onPress={this.scrollToElement}>
        <Text>
         跳转
        </Text>
      </TouchableOpacity>
    </ScrollView>