年后主客户端的需求以及老的业务迁移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. awk 中的难懂符号解释

    awk中NF和NR的意义,其实你已经知道NF和NR的意义了,NF代表的是一个文本文件中一行(一条记录)中的字段个数,NR代表的是这个文本文件的行数(记录数). 看个例子: cal 9 2003 Sep ...

  2. 正则--test exec search match replace

    1:test 是正则对象的方法不是字符串的方法,使用例子:正则对象也就是那个设定好的模式对象 var str = "hello world!"; var result = /^he ...

  3. vue+富文本编辑器UEditor

    vue+富文本编辑器UEditor 昨天的需求是把textarea换成富文本编辑器的形式, 网上找了几种富文本编辑器ueditor.tinymce等, 觉得ueditor实现双向绑定还挺有意思, 分享 ...

  4. react中的传参方式

    react是一个SPA模式,即组件嵌套租,在一个单页面的应用中组件间的数值传递是必不可少的,主要的传参方式大致有一下几种: 1,在挂载的地方给组件传参 ReactDOM.rander(<a na ...

  5. JavaScript热身练习1

    把某个元素移出你的视线: 1.display:none:(显示为无,不占地) 2.visibility:hidden:(隐藏,占地) 3.宽或者高设置为零 4.透明度设置 5.left/top (定位 ...

  6. arp嗅探(windows)

    本次实验环境:windows本次实验工具:cain汉化版1.点击配置,嗅探器里选一个适配器,点击确定. 2.点击 3.扫描mac地址 4.点击ARP->嗅探器->添加到列表5.点击开始嗅探 ...

  7. 2072. Kirill the Gardener 3

    http://acm.timus.ru/problem.aspx?space=1&num=2072 回忆一下 #include <iostream> #include <st ...

  8. 蒙层嵌套pdf以及连接后台

    一.在本地浏览pdf(直接将element-dialog 和 iframe相结合)需要将要浏览的pdf放入static文件夹下面 <el-button type="text" ...

  9. 21. Merge Two Sorted Lists★

    题目内容:Merge two sorted linked lists and return it as a new list. The new list should be made by splic ...

  10. 前端车牌识别SDK算法提取

    同行业中,别人标配有的产品我有,别人没有的产品我们也有,如此才能增强竞争力,通过优化创新,前端车牌识别SDK功能,性能上,都是行业NO.1的水平.车牌识别sdk这个用于越来越多人集成了,汽车保有量日益 ...