年后主客户端的需求以及老的业务迁移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. 【转】10分钟就能学会的.NET Core配置

    .NET Core为我们提供了一套用于配置的API,它为程序提供了运行时从文件.命令行参数.环境变量等读取配置的方法.配置都是键值对的形式,并且支持嵌套,.NET Core还内建了从配置反序列化为PO ...

  2. vue v-if控制显隐,页面加载出现闪现 v-cloak

    <div id="divApp"> <div v-if="type === 'A'" v-cloak> A </div> & ...

  3. c++中各类型数据所占字节数(一)

    转自: https://blog.csdn.net/hi_baymax/article/details/82415896 和机器字长及编译器有关系: 所以,int,long int,short int ...

  4. yml多环境配置

    配置独立各自的环境 注:如果需要修改环境测试,只需要修改spring: profiles: active: “环境名” spring: profiles: active: prd --- #开发环境配 ...

  5. Linux c使用gumbo库解析页面表单信息(一)

    一.gumbo介绍 gumbo是一个由谷歌开发的,能够解析html页面的库.功能稳定可靠,使用起来十分方便. 二.gumbo安装 (1)从https://github.com/google/gumbo ...

  6. 棋牌平台开发教程之扎金花大小比较算法在php中的实现

    PHP中扎金花比大小如何实现 在棋牌游戏中,不管是现实的还是线上的,扎金花无疑是最热门棋牌游戏之一,鄙人从小就酷爱扎金花,机缘巧合后面从事了IT行业,话不多说,直接进去正题吧. 扎金花两副牌的比较规则 ...

  7. 爬取字段和图片 spider_getModelInformation

    import urllibimport urllib2import re class Spider: def getPage(self,pageIndex): url="http://mm. ...

  8. vue-cli项目多页面配置

    参考 : https://www.jianshu.com/p/0a30aca71b16

  9. vue 路由(1)

    路由的使用  (5步) 1.首先安装路由  npm install  vue-router2.引入 vue-router import VueRouter from 'vue-router' 3.使用 ...

  10. MySql主从搭建详细步骤

    环境: linux64位,一台机器两个实例,主库3306端口,从库3307端口 步骤: 一.下载安装 先下载安装mysql,这里使用了5.7.21版本,具体过程不做详细说明,可自行查资料如何下载 二. ...