emptyapp/src/pages/_5_Root.js

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 TabBar from '../components/TabBar';
import Player from "../components/Player";
//import Player from "./PlayerGesture"; 

C.addColor("#d7d7d7", "color-listbg");

const BTNS = [
    [
        {title: "行" ,subtitle : "working \nmeditation" , contensTitle : "행선" , contensSubTitle : "" , contens:"하루 20분 정도 걸으면서 하는 행선은 좌선 1시간 이상의 효과를 가져옵니다.", img : require("../res/Working_meditation.png")},
        {title: "住" ,subtitle : "standing \nmeditation", contensTitle : "주선" , contensSubTitle : "" , contens:"일상생활 속에 잠시 머무름은 인생에서 쉬어가는 의미를 가집니다. 바쁜 일상 속에서 잠시 머무름을 가지고 짧게 마음의 고요함을 찾으시길 바랍니다.", img : require("../res/Standing_meditation.png")},
        {title: "坐" ,subtitle : "seat and \nmeditation", contensTitle : "좌선" , contensSubTitle : "" , contens:"가부좌가 아니더라도 일상생활 속에서 편한 자세로 앉아서 정신을 집중하여 무념무상의 상태로 들어가는 선수행을 말합니다.", img : require("../res/Seatand_meditation.png")},
        {title: "卧" ,subtitle : "Lying \nmeditation"   , contensTitle : "와선" , contensSubTitle : "" , contens:"OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO", img : require("../res/Lying_meditation.png")},
        {title: "身" ,subtitle : "body"                 },  
    ],
    [
        {title:"사랑", subtitle : "Love",     contensTitle : "사랑" , contensSubTitle : "(애별리고)" , contens:"우리는 우리와 가까운, 우리가 원하는, 우리가 좋아하는, 우리를 편리하게 해 주고 행복하게 해 주던 많은 것들과 이별을 해야 하는 괴로움을 버려야 합니다.", img : require("../res/Working_meditation.png")},
        {title:"미움", subtitle : "Hate",     contensTitle : "미움" , contensSubTitle : "(원증회고)" , contens:"싫어하는 것을 해야 하는 것, 싫어하는 사람과 함께 있는 것이란 얼마나 큰 괴로움인가. 이는 가장 큰 괴로움이며 여기서 벗어나야 합니다.", img : require("../res/Standing_meditation.png")},
        {title:"탐욕", subtitle : "Avarice",  contensTitle : "탐욕" , contensSubTitle : "(구부득고)" , contens:"좋아하는 사람, 물건, 재산, 명예, 권력, 지위, 출세, 행복, 건강 등 얻고자 하고 바라지만 마음대로 구할 수 없는데서 괴로움은 시작된다.", img : require("../res/Seatand_meditation.png")},
        {title:"탐식", subtitle : "Voracity", contensTitle : "탐식" , contensSubTitle : "(구부득고)" , contens:"현대사회에서 물질적 풍요와 상반되게 정신적 빈곤으로 인한 강박장애, 불안장애 같은 정신적 증상은 얻고자 하는 욕심으로 인하여 나타나는 화병의 일환", img : require("../res/Lying_meditation.png")},
        {title: "心" , subtitle : "Mind"},  
    ]
]
const tabPosition = {x:0, y:0, w:0, h:0};

export default (props)=>{
    const [ sel_idx, setsel_Idx ] =  useState(0);
    const [ targetIdx, setTargetIdx ] =  useState(0);
    
    const [ bPlay, setbPlay] =  useState(false); 
    const [ curPlayInfo, setCurPlayInfo] =  useState({});

    const onTabPress = (tIdx, i)=>{
        setsel_Idx(i);
        setTargetIdx(tIdx);
        setbPlay(false);
    }
    const startPlay = (p)=>{
        setbPlay(true);
        setCurPlayInfo(p.Pages);
    }

    let Page;
    if(sel_idx == -1){
        Page = Main;
    }else{
        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={bPlay}/>
            
            {bPlay ? <Player {...props} Pages={curPlayInfo} tabPosition={tabPosition} closePlayer={()=>setbPlay(false)}/>  : null}
            {/* {bPlay ? <C.View cls="flx0.1"/>  : null} */}

            <TabBar setTabPosition={setTabPosition} onTabPress={onTabPress} BTNS={BTNS}/>  
        </C.View> 
    )  

}