获取 sectionlist header 组件的 Y 值

Question

我正在为分区列表创建间谍卷轴，我想获取分区列表的 Y 值 header，

我尝试使用 onLayout 方法，但我只得到 y 值 0 。我假设我的组件在 react-native 容器内，所以我的视图获得此容器的相对值 0..

这是我的代码：

<Animated.SectionList
                    initialNumToRender={5}
                    keyExtractor={(item) => item.docRef}
                    sections={data.slice()}
                    renderSectionHeader={this.renderSectionHeader}
                    renderItem={this.renderItem}
                    stickySectionHeadersEnabled={false}
                />

renderSectionHeader = ({section}) => {
    const index = section.sort;
    return (
        <View onLayout={e => this.onSectionLayout(e, index)}>
            <SectionListHeader section={section} index={index}/>
        </View>
    )
};

onSectionLayout = ({nativeEvent: {layout: {x, y, width, height}}}, index) => 
{
    console.log(height)
};

Answer 1

因为SectionHeader被父视图包裹，所以y位置总是0

另一种方法是ref.measure。喜欢

constructor(props) {
    super(props)
    this.sectionHeaders = []
}

renderSectionHeader = ({section}) => {
    const index = section.sort;
    return (
        <View ref={c => this.sectionHeaders[index] = c}>
            <SectionListHeader section={section} index={index}/>
        </View>
    )
};

componentsDidMount() {
    setTimeout(() => {
      this.sectionHeaders.forEach((ref,index)=>{
        ref.measure((fx,fy,w,h,px,py) => {
           console.log('y pos is ',py))
        })
     })
  }, 500)
}

获取 sectionlist header 组件的 Y 值

get the Y value of the sectionlist header component

react-native

react-native-sectionlist