react-native 获取某一元素的绝对位置(相对于屏幕左上角)

react-native 获取某一元素的绝对位置(相对于屏幕左上角),第1张

DOM结构:

<View style={stylescheckContainer}  ref='checkContainer' onLayout={({nativeEvent:e})=>thislayout(e)}> 

</View>

对应js方法:

layout=(e)=>{

      consolewarn(elayouty)  ;

      var UIManager = require('UIManager');

      consolewarn(etarget);

      UIManagermeasure(etarget, (x, y, width, height, left, top) => {

     consolewarn('x:'+x)

     consolewarn('y:'+y)

     consolewarn('width:'+width)

     consolewarn('height:'+height)

     consolewarn('left:'+left)

     consolewarn('top:'+top)

})

}

注意:View组件的onLayout(可以得到宽高和相对位置)配合UIManagermeasure(可以得到宽高和绝对位置)一起使用

附加知识点:

得到某一dom元素的节点值:

import {findNodeHandle} from 'react-native';

var nodeData = findNodeHandle(thisrefsname);

nodeData即为节点值

1字符串

通过 thisrefsdemo 来引用真实dom的节点,建议不要使用它,因为字符串引用有一些问题,被认为是遗留问题,很可能会在未来的某个版本中删除。新版好像不推荐这样使用了

<input  ref="demo" type ="text" placeholder='点击之后提示数据'/>

2回调函数(内联形式)

回调函数就是在dom节点或组件上挂载函数,函数的入参是dom节点或组件实例,达到的效果与字符串形式是一样的,都是获取其引用。(实际开发中使用的比较多)

 <input ref={(currentNode)=>{thisinput1=currentNode}} type="text" placeholder='点击之后提示数据'/> 

3回调函数(外联形式)

<input ref={thissaveInput} type="text" placeholder='点击之后提示数据'/>

saveInput=(current)=>{

    consolelog(current)

    thisinput1=current

  }

4ReactcreateRef()

ReactcreateRef()是React 163之后引入的新API。如果您使用的是早期版本的React,我们建议您使用回调引用。Refs是使用属性创建的,ReactcreateRef()并通过ref属性附加到React元素。在构造组件时,通常将Refs分配给实例属性,以便可以在整个组件中引用它们。

<input ref={thismyRef1} type="text" placeholder='点击提示createRef'/>

myRef1= ReactcreateRef() //专人专用每次都只能一次,

myRef2= ReactcreateRef() //专人专用每次都只能一次,

获取input的值:consolelog(thismyRefcurrentvalue)

React 官方文档中如此声明:"如果你目前还在使用 thisrefstextInput 这种方式访问 refs ,我们建议用回调函数或 createRef API 的方式代替。" 为何如此糟糕?

自行百度吧、因为我也不知道!!!!

以上就是react中ref一些总结、希望能帮到一些同学们

r语言中节点标号和节点距离用什么标签

SAP只能通过“设定显示选项”来实现所有可见节点的标签显示开关,不能如你所说的部分显示而部分不显示。 不知道你的具体目的是什么,不过要是想知道众多节点中的某个节点编号,可以选中节点后右击,即可检视其编号。

ansys中节点到直线的距离

不可以直接提取,但是可以提取节点与直线上节点的距离。

在直线上选择两个节点,分别测量出距离直线外节点的距离后,就可以自己计算出距离直线的距离了,简单的三角函式计算即可实现。

节点光端机的传输距离 是 节点间的距离还是 节点到 主光端机的距离? 主光端机和节点光端机油区别吗?

1、节点到 主光端机的距离

2、没有区别

光端机是成对的 没有分主次

来自广州辉鹏网路科技有限公司。

r语言 为什么决策树只有根节点

自变数量的筛选是根据其卡方显著性程度不断自动生成父节点和子节点,卡方显著性越高,越先成为预测根结点的变数(建模需要的变数),程式自动归并预测变数的不同类

知道节点和节点座标怎么用matlab绘图啊?

clear all;

anchor_x=[锚节点1的x座标 锚节点2的x座标 ];

anchor_y=[锚节点1的y座标 锚节点2的y座标 ];

anchor_z=[锚节点1的z座标 锚节点2的z座标 ];

node_x=[未知节点1的x座标 未知节点2的x座标 ];

node_y=[未知节点1的y座标 未知节点2的y座标 ];

node_z=[未知节点1的z座标 未知节点2的z座标 ];

figure(1)

plot3(anchor_x,anchor_y,anchor_z,'r',node_x,node_y,node_z,'k')

Multisim中节点如何标记

Multisim中,电路节点会被自动赋予名称,一般是号码,电源或地则直接命名(如V、GND等)。如看不见,主选单“选项Options”→“Sheet Properties”→“Circuit”→“Net Names”,选“Show All”。

如何获取标签中的节点

子节点的个数:

documentgetElementById("id")childNodeslength

注意: 标签开/闭合算2个节点 第几个子几点:

documentgetElementById("id")childNodes[n]

sap2000如何查节点标号

字典

C# 中对于Xmlnode节点怎么获得当前节点的标签名?

nodeListItem(1)Name 获得节点标签名

nodeListItem(1)InnerText 获取节点类容

react怎么获取dom节点距离文件的值

为了获取真实的dom节点,文字输入框必须有一个 ref 属性,然后 thisrefs[refName] 就会返回这个真实的 DOM 节点。

var MyComponent = ReactcreateClass({

handleClick: function() {

thisrefsmyTextInputfocus();

},

render: function() {

return (

<div>

<input type=text ref="myTextInput" />

<input type=button value="Focus the text input" onClick={thishandleClick} />

</div>

);

}

});

ReactDOMrender(

<MyComponent />,

documentgetElementById('example')

);

以上就是关于react-native 获取某一元素的绝对位置(相对于屏幕左上角)全部的内容,包括:react-native 获取某一元素的绝对位置(相对于屏幕左上角)、react中ref的四种用法、r语言中节点标号和节点距离用什么标签等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/9818756.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-02
下一篇 2023-05-02

发表评论

登录后才能评论

评论列表(0条)

保存