React Native 获取组件(Component)在屏幕上的位置

年后主客户端的需求以及老的业务迁移RN,现在疯狂的在学RN。在迁移需求的时候遇到需要获取组件在屏幕上的绝对位置。页面如下:

就需要展开的时候获取sectionHeader(默认排序)在屏幕上的具体位置,核心代码如下:

renderSectionHeaderContent() {
        return (
            <SectionHeader
                ref={(sectionHeader) => { this.sectionHeader = sectionHeader; }}

                title={this.state.sectionHeaderTitle}
                clickSectionHeader={() => {
                    const handle = findNodeHandle(this.sectionHeader);
                    UIManager.measure(handle, (x, y, width, height, pageX, pageY) => {
                       
                    });
                }}
            />
        );
    }

注:需要 import { UIManager} from 'NativeModules';   x、y:为视图的相对位置。width、height:为视图的宽度和高度。pageX、pageY为视图在屏幕上的绝对位置。

================================================================

初学React Native 。若有疑问请加本人QQ:610774281 微信:stephenli225。 一起探讨一起进步。。。。

原文地址:https://www.cnblogs.com/lidaojian/p/6735087.html