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。 一起探讨一起进步。。。。
React Native 获取组件(Component)在屏幕上的位置的更多相关文章
- React Native获取组件位置和大小
RN页面中定位或滚动操作时,需要获取元素的大小和位置信息,有几种常用的方法 获取设备屏幕的宽高 import {Dimensions} from 'react-native'; var {height ...
- react native获取组件高度,宽 度等
import React,{Component} from 'react'import { View, Text, Image, StyleSheet, TouchableHighlight, Tou ...
- react native 获取 软键盘高度 和 新增软键盘的组件
import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, Keyboard, Te ...
- React Native常用组件在Android和IOS上的不同
React Native常用组件在Android和IOS上的不同 一.Text组件在两个平台上的不同表现 1.1 height与fontSize 1.1.1只指定font,不指定height 在这种情 ...
- React Native交互组件之Touchable
React Native交互组件之Touchable:只要在组件外面包一个Touchable组件就可以实现点击交互. TouchableHighlight:高亮触摸 当点击时,组件的透明度会改变,可以 ...
- React Native 中的component 的生命周期
React Native中的component跟Android中的activity,fragment等一样,存在生命周期,下面先给出component的生命周期图 getDefaultProps ob ...
- [RN] React Native 获取验证码 按钮
React Native 获取验证码 按钮 效果如图: 实现方法: 一.获取验证码 按钮组件 封装 CountDownButton.js "use strict"; import ...
- React Native 之 组件化开发
前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...
- React Native的组件ListView
React Native的组件ListView类似于iOS中的UITableView和UICollectionView,也就是说React Native的组件ListView既可以实现UITableV ...
随机推荐
- HDU 3月ACM模拟赛T10 COUNT
题面 //来自TKJ的友好提供 ^_^ 然后我又被卡了半天不知道怎么转移N3 于是听CWY给我讲 终于会了 (虽然他讲的不是很清楚QAQ 但是凭着我们之间根本不存在的默契竟然达成了心智联通) 重点在于 ...
- cron 配置
一个cron表达式有至少6个(也可能7个)有空格分隔的时间元素. 按顺序依次为 秒(0~59) 分钟(0~59) 小时(0~23) 天(月)(0~31,但是你需要考虑你月的天数) 月(0~11) 天( ...
- Django 之 cookie和session
一. Cookie 1.Cookie的由来 因为HTTP协议是无状态的,无状态的意思就是每次请求都是独立的,它的执行情况和结果与前面的请求和之后的请求都无直接关系,也不会受前后请求响应情况直接影响.简 ...
- Tsinghua 2018 DSA PA3简要题解
CST2018 3-1-1 Sum (15%) 简单的线段树,单点修改,区间求和. 很简单. CST2018 3-1-2 Max (20%) 高级的线段树. 维护区间最大和,区间和,左边最大和,右边最 ...
- 保存cookie状态封装
from urllib import request, parsefrom urllib.error import HTTPError,URLError#保存cookiefrom http impor ...
- springboot秒杀课程学习整理1-5
1)交易模型设计 交易模型(用户下单的交易模型)OrderModel id(String 交易单号使用String), userId,itemId,amount(数量),orderAmount(总金额 ...
- Django知识总结(三)
拾伍 ● Ajax技术 一 ● Ajax定义 Ajax: 异步的 JavaScript 和 XML (Asynchronous+Javascript+XML) 通过Ajax, 我们可以在不重新加载整个 ...
- 2、CentOS下编译安装Python2.7.6(转)
CentOS系统下面Python在升级到2.7.6的时候,没有找到安装包直接安装,只能通过源代码编译的方式来安装Python 2.7.6版本.这篇是编译和安装Python2.7.6的过程记录. Cen ...
- MySql5.5安装详细说明
双击MySql5.5安装文件开始: next 打勾,Next 选Custom,原因如下面所述: Typical(典型安装) Installs the most common program fea ...
- css引用与html语义化
一.CSS引用1. 使用外部样式表: CSS代码在一个独立的文件中,HTML通过link元素引入到页面 格式:link + tab键<link rel="stylesheet&q ...