react native 测量组件高度

测量组件距离屏幕高度

• onlayout
• measure

onlayout

const page=()=>{
  const _onlayout=(event)=>{
    const y=event.nativeEvent.layout.y;
    console.log(y);
    //view到屏幕顶部的距离
  }
  return(
  	<View>
    	<AppBar />
    	<View style={{height:0}} onlayout={(e)=>_onlayout(e)}/>
    </View>
  )
}

measure

const page=()=>{
  const showHeight=()=>{
    tabRef.current?.measure((x:number,y:number,width:number,height:number,pageX:number,pageY:number)=>{
      console.log(height);
      //height是组件的高度，就是该组件最底部距屏幕顶部的距离
    })
  }
  return (
  	<View ref={tabRef}>
    	<AppBar />
    </View>
  )
}

两者的不同

• onlayout需要创建额外的元素，会导致页面存在过多的不需要的标签元素