年后主客户端的需求以及老的业务迁移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。 一起探讨一起进步。。。。

React Native 获取组件(Component)在屏幕上的位置的更多相关文章

  1. React Native获取组件位置和大小

    RN页面中定位或滚动操作时,需要获取元素的大小和位置信息,有几种常用的方法 获取设备屏幕的宽高 import {Dimensions} from 'react-native'; var {height ...

  2. react native获取组件高度,宽 度等

    import React,{Component} from 'react'import { View, Text, Image, StyleSheet, TouchableHighlight, Tou ...

  3. react native 获取 软键盘高度 和 新增软键盘的组件

    import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, Keyboard, Te ...

  4. React Native常用组件在Android和IOS上的不同

    React Native常用组件在Android和IOS上的不同 一.Text组件在两个平台上的不同表现 1.1 height与fontSize 1.1.1只指定font,不指定height 在这种情 ...

  5. React Native交互组件之Touchable

    React Native交互组件之Touchable:只要在组件外面包一个Touchable组件就可以实现点击交互. TouchableHighlight:高亮触摸 当点击时,组件的透明度会改变,可以 ...

  6. React Native 中的component 的生命周期

    React Native中的component跟Android中的activity,fragment等一样,存在生命周期,下面先给出component的生命周期图 getDefaultProps ob ...

  7. [RN] React Native 获取验证码 按钮

    React Native 获取验证码 按钮 效果如图: 实现方法: 一.获取验证码 按钮组件 封装 CountDownButton.js "use strict"; import ...

  8. React Native 之 组件化开发

    前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...

  9. React Native的组件ListView

    React Native的组件ListView类似于iOS中的UITableView和UICollectionView,也就是说React Native的组件ListView既可以实现UITableV ...

随机推荐

  1. 常用算法的python实现

    1.乘法表 #! -*- coding:utf-8 -*- for i in range(1,10): for j in range(1,i+1): print('%d*%d=%d\t' % (i, ...

  2. GDAL——命令使用专题——gdallocationinfo命令

    GDAL——命令使用专题——gdallocationinfo命令  前言 GDAL(Geospatial Data Abstraction Library)是一个在X/MIT许可协议下的开源栅格空间数 ...

  3. unity中的UGUI一些组件的使用

    一.Toggle Group(Script) LeftButtons上添加Toggle Group组件,属性Allow Switch Off打对勾,代表它的所有子物体上带有Toggle组件的属性Is ...

  4. [线段树]HDU-1754板子题入门ver

    HDU-1754 线段树数组请开到四倍 众所周知数组开小会导致re tle wa等一系列问题orz 板子就是板子,数组从零开始或是从一开始都没什么问题,就是2*root+1还是2*root+2的问题. ...

  5. javascript--返回顶部效果

    window.onload = function(){ var obtn = document.getElementById('btn'); //客户端页面可视区高度 var clientHeight ...

  6. c++ 指针、引用和取值;

    直接看代码: #include<iostream> using namespace std; int add(int *a,int *b){ int s; s = *a + *b; cou ...

  7. GC 是什么? 为什么要有GC?

    C/C++中由程序员进行对象的回收像学校食堂中由学生收盘子,.Net 中由GC 进行垃圾回收像餐馆中店员 去回收. GC 是垃圾收集器(Garbage Collection).程序员不用担心内存管理, ...

  8. spring cloud 服务A调用服务B自定义token消失,记录

    后端:spring cloud 前端:vue 场景:前端ajax请求,包装自定义请求头token到后台做验证,首先调用A服务,A服务通过Feign调用B服务发现自定义token没有传到B服务去; 原因 ...

  9. Frist one

    2017.11.27 10:20am 今天也许只是普通的一个周一上午 但是我希望在多年以后 在我回望这些年的努力学习中 今天会是最浓墨重彩的一笔 我时常感到焦虑 对未来的焦虑 对感情的焦虑 以至于 我 ...

  10. sprindmvc

    Spring Web MVC是一种基于Java的实现了Web MVC设计模式的请求驱动类型的轻量级Web框架,即使用了MVC架构模式的思想,将web层进行职责解耦,基于请求驱动指的就是使用请求-响应模 ...