年后主客户端的需求以及老的业务迁移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. Django介绍

    diango介绍 web框架介绍 web框架: Web应用框架(Web application framework)是一种开发框架,用来支持动态网站.网络应用程序及网络服务的开发.其类型有基于请求的和 ...

  2. tomcat启动正常,但是访问项目时,404. Eclipse没有正确部署工程项目

    解决方案URL:http://blog.csdn.net/lynn_wgr/article/details/7751228

  3. java-面向对象(公元2017-6-28)

    1.面向对象 何为面向对象:编写程序的时候会提取相似的 特征,把这些相似的特征组织起来 类:相似的特征组织起来的类型.            泛指.可理解为模板 对象:属于类中的具体事物       ...

  4. Django:同一个app支持多个数据库

    我以我个人的Mynote工程说明,目的是要在backend这个app里面设置不同的model对应daysn和bear两个数据库进行操作 现在我们先简单对一个完全新建的django工程配置一个自动在my ...

  5. C#中d的??和?

    在C#中??和?分别是什么意思?   1. 可空类型修饰符(?):引用类型可以使用空引用表示一个不存在的值,而值类型通常不能表示为空.例如:string str=null; 是正确的,int i=nu ...

  6. sed 命令总结

    sed是Stream Editor的缩写,是操作.过滤.转换文本内容的强大工具,对文件实现增删改查 主要参数 -n 取消默认输出 -i 修改保存文件 内置命令字符 a,append追加 d,delet ...

  7. 网页Title加LOGO图标

    <link rel="icon" href="XXX.ico" type="image/x-icon"/> 只能放格式为.ico ...

  8. emacs安装及配置

    目录 平台 安装 基本配置 配置文件结构 elpa仓库管理 主题配色 字体显示配置(解决中文卡顿) 插件配置 markdown 简介 markdown-mode markdown-toc org导出m ...

  9. JS中的变量和数据类型

    所谓变量,就是里面存储的数据是可以改变的. 在使用变量之前,我们需要先声明变量.声明变量的关键字有var  let   const 在ES里面声明变量可以使用var,如下: //var 变量名 var ...

  10. java IO性能对比----read文件

    本次对比内容为:(jdk1.8) fileInputStream:最基本的文件读取(带自己声明的缓冲区) dataInputStream:字节读取,在<java编程思想>一书中描述为使用最 ...