TabBar onLayout 이벤트를 통해 player 축소 시 y 값 처리

src/components/TabBar.js

@@ -1,4 +1,4 @@
-import React , {useState}from 'react';
+import React , {useState, forwardRef}from 'react';
 // import Tab from '../navigation/TabNavigator';
 import C from 'rn-class'
 import Main from '../pages/_6_Main'
@@ -8,8 +8,7 @@ C.addColor("#c0bb97CC", "color-btnbg-non")
 C.addColor("#eec026", "color-btnbg-last")
 C.addColor("#c0bb97", "color-btnbg-sel")
         
-
-export default (props)=>{
+export default props => {
     let [ sel_idx, setsel_Idx ] =  useState(-1);
     let [ targetIdx, setTargetIdx ] =  useState(0);
     let btns = props.BTNS[targetIdx]; 
@@ -35,9 +34,17 @@ export default (props)=>{
         
 
     }
-    
+    const onLayout = ({nativeEvent}) => {
+        console.log(nativeEvent.layout.y)
+        const data = {};
+        data.x = nativeEvent.layout.x;
+        data.y = nativeEvent.layout.y;
+        data.w = nativeEvent.layout.width;
+        data.h = nativeEvent.layout.height;
+        props.setTabPosition && props.setTabPosition(data);
+    }
     return (
-        <C.View cls="h8 bgc-color-white flx-row ai-e jc-sa">
+        <C.View onLayout={onLayout} cls="h8 bgc-color-white flx-row ai-e jc-sa">
             {
                 Object.keys(btns).map((obj, idx) => { 
                     return ( 
@@ -64,7 +71,4 @@ export default (props)=>{
             
         </C.View>
     )  
-
-
 }
-

src/pages/_5_Root.js

@@ -1,11 +1,11 @@
-import React ,{useState} from 'react';
+import React ,{useState, useRef, useEffect} from 'react';
 // import Tab from '../navigation/TabNavigator';
-import C from 'rn-class'
-import Main from './_6_Main'
-import List from './_7_List'
-// import List from './_7_List' 
-import TabBar from '../components/TabBar'
-import Player from "./PlayerGesture"; 
+import C from 'rn-class';
+import Main from './_6_Main';
+import List from './_7_List';
+import TabBar from '../components/TabBar';
+import Player from "../components/Player";
+//import Player from "./PlayerGesture"; 
 
 C.addColor("#d7d7d7", "color-listbg");
 
@@ -25,49 +25,54 @@ const BTNS = [
         {title: "心" , subtitle : "Mind"},  
     ]
 ]
+const tabPosition = {x:0, y:0, w:0, h:0};
 
 export default (props)=>{
-    let [ sel_idx, setsel_Idx ] =  useState(0);
-    let [ targetIdx, setTargetIdx ] =  useState(0);
+    const [ sel_idx, setsel_Idx ] =  useState(0);
+    const [ targetIdx, setTargetIdx ] =  useState(0);
     
-    let [ bPlay, setbPlay] =  useState(false); 
-    let [ curPlayInfo, setCurPlayInfo] =  useState({});
+    const [ bPlay, setbPlay] =  useState(false); 
+    const [ curPlayInfo, setCurPlayInfo] =  useState({});
 
-    let onTabPress = (tIdx, i)=>{
+    const onTabPress = (tIdx, i)=>{
         setsel_Idx(i);
         setTargetIdx(tIdx);
         setbPlay(false);
     }
-    let startPlay = (p)=>{
-        setbPlay(true); 
+    const startPlay = (p)=>{
+        setbPlay(true);
         setCurPlayInfo(p.Pages);
     }
+
     let Page;
     if(sel_idx == -1){
         Page = Main;
     }else{
         Page = List; 
     }
-    // Page = List;   
-    
 
-    
+    useEffect(()=>{
 
+    },[]);
 
+    const setTabPosition = (data) => {
+        tabPosition.x = data.x;
+        tabPosition.y = data.y;
+        tabPosition.w = data.w;
+        tabPosition.h = data.h;
+    }
 
     return (
         <C.View cls="flx1 bgc-color-white"> 
             <C.Comp.Header  {...props}/>
             <Page   {...props} Pages={sel_idx == -1 ? {} : BTNS[targetIdx][sel_idx]}  startPlay={startPlay}/>
             
-            {bPlay ? <Player  {...props} Pages={curPlayInfo}  closePlayer={()=>setbPlay(false)}/>  : null}
+            {bPlay ? <Player {...props} Pages={curPlayInfo} tabPosition={tabPosition} closePlayer={()=>setbPlay(false)}/>  : null}
             {bPlay ? <C.View cls="flx0.1"/>  : null}
 
-            
-            <TabBar onTabPress={onTabPress} BTNS={BTNS}/>  
+            <TabBar setTabPosition={setTabPosition} onTabPress={onTabPress} BTNS={BTNS}/>  
         </C.View> 
     )  
 
-
 }