react native 獲取組件在屏幕中的位置

1,import { findNodeHandle} from'react-native';

2,import{UIManager}from'NativeModules'

3,給組件添加 ref={(ref) =>this.myShow= ref} ref屬性

4,

const handle = findNodeHandle(this.myShow);

UIManager.measure(handle,(x,y,width,height,pageX,pageY) => {

console.log(x,y,width,height,pageX,pageY);

});

==========等同于========

this.myShow.measure((x,y,width,height,pageX,pageY) => {

console.log(x,y,width,height,pageX,pageY);

});

//x、y:為視圖的相對位置。width、height:為視圖的寬度和高度。pageX、pageY為視圖在屏幕上的絕對位置。(在android上有問題)可采取

onLayout={(e)=>layout = e.nativeEvent.layout} 這個屬性在組件開始加載時就獲取到

但是此方法不靈活,只適用于固定頁面。相當于是取當前組件在屏幕中的絕對位置!!!一旦滾動就不適用!!!

=========或者========

import { UIManager, findNodeHandle } from 'react-native'

給需要獲取的視圖添加ref ==> ? ? ??ref={(ref) => this.doneBtn = ref}

需要獲取時直接取值

UIManager.measure(findNodeHandle(this.doneBtn), (x, y, width, height, pageX, pageY) => {

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? this.scrollView.scrollTo({ x: 0, y: y- 50, animated: true });

? ? ? ? ? ? ? ? ? ? ? ? ? ? });

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容