리스트 페이지 제작

src/components/TabBar.js

@@ -7,28 +7,12 @@ import _ from 'lodash'
 C.addColor("#c0bb97CC", "color-btnbg-non")
 C.addColor("#eec026", "color-btnbg-last")
 C.addColor("#c0bb97", "color-btnbg-sel")
-
-const BTNS = [
-    [
-        {title: "行" , subtitle : "working \nmeditation"}, 
-        {title: "住" , subtitle : "standing \nmeditation"}, 
-        {title: "坐" , subtitle : "seat and \nmeditation"}, 
-        {title: "卧" , subtitle : "Lying \nmeditation"}, 
-        {title: "身" , subtitle : "body"},  
-    ],
-    [
-        {title:"사랑", subtitle : "Love", contens:"우리는 우리와 가까운, 우리가 원하는, 우리가 좋아하는, 우리를 편리하게 해 주고 행복하게 해 주던 많은 것들과 이별을 해야 하는 괴로움을 버려야 합니다.", img : require("../res/Working_meditation.png")},
-        {title:"미움", subtitle : "Hate", contens:"싫어하는 것을 해야 하는 것, 싫어하는 사람과 함께 있는 것이란 얼마나 큰 괴로움인가. 이는 가장 큰 괴로움이며 여기서 벗어나야 합니다.", img : require("../res/Standing_meditation.png")},
-        {title:"탐욕", subtitle : "Avarice", contens:"좋아하는 사람, 물건, 재산, 명예, 권력, 지위, 출세, 행복, 건강 등 얻고자 하고 바라지만 마음대로 구할 수 없는데서 괴로움은 시작된다.", img : require("../res/Seatand_meditation.png")},
-        {title:"탐식", subtitle : "Voracity", contens:"현대사회에서 물질적 풍요와 상반되게 정신적 빈곤으로 인한 강박장애, 불안장애 같은 정신적 증상은 얻고자 하는 욕심으로 인하여 나타나는 화병의 일환", img : require("../res/Lying_meditation.png")},
-        {title: "心" , subtitle : "Mind"},  
-    ]
-]
+        
 
 export default (props)=>{
     let [ sel_idx, setsel_Idx ] =  useState(-1);
     let [ targetIdx, setTargetIdx ] =  useState(0);
-    let btns = BTNS[targetIdx]; 
+    let btns = props.BTNS[targetIdx]; 
 
     _.forEach(btns, (obj, idx)=>{
         if(idx == sel_idx){ 
@@ -40,13 +24,16 @@ export default (props)=>{
         }
     });
     let onTabPress= ( obj, idx )=>{
-        console.log(btns.length-1 , "[0" ,idx);
         if(idx == btns.length-1){
             setTargetIdx(targetIdx^1);
             setsel_Idx(-1);
+            props.onTabPress && props.onTabPress(targetIdx, -1);  
         }else{
             setsel_Idx(idx);
+            props.onTabPress && props.onTabPress(targetIdx, idx);  
         }
+        
+
     }
     
     return (

src/pages/_3_Guide1.js

@@ -6,10 +6,10 @@ C.addColor("#d7d7d7", "color-listbg");
 
 export default (props)=>{
     let datas = [
-        {title:"행선", sub:"Working\nmeditation", contens:"하루 20분 정도 걸으면서 하는 행선은 좌선 1시간 이상의 효과를 가져옵니다.", img : require("../res/Working_meditation.png")},
-        {title:"주선", sub:"Standing\nmeditation", contens:"일상생활 속에 잠시 머무름은 인생에서 쉬어가는 의미를 가집니다. 바쁜 일상 속에서 잠시 머무름을 가지고 짧게 마음의 고요함을 찾으시길 바랍니다.", img : require("../res/Standing_meditation.png")},
-        {title:"좌선", sub:"Seat and\nmeditation", contens:"가부좌가 아니더라도 일상생활 속에서 편한 자세로 앉아서 정신을 집중하여 무념무상의 상태로 들어가는 선수행을 말합니다.", img : require("../res/Seatand_meditation.png")},
-        {title:"와선", sub:"Lying\nmeditation", contens:"OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO", img : require("../res/Lying_meditation.png")},
+        {title:"행선", sub:"Working\nmeditation"    , contens:"하루 20분 정도 걸으면서 하는 행선은 좌선 1시간 이상의 효과를 가져옵니다.", img : require("../res/Working_meditation.png")},
+        {title:"주선", sub:"Standing\nmeditation"   , contens:"일상생활 속에 잠시 머무름은 인생에서 쉬어가는 의미를 가집니다. 바쁜 일상 속에서 잠시 머무름을 가지고 짧게 마음의 고요함을 찾으시길 바랍니다.", img : require("../res/Standing_meditation.png")},
+        {title:"좌선", sub:"Seat and\nmeditation"   , contens:"가부좌가 아니더라도 일상생활 속에서 편한 자세로 앉아서 정신을 집중하여 무념무상의 상태로 들어가는 선수행을 말합니다.", img : require("../res/Seatand_meditation.png")},
+        {title:"와선", sub:"Lying\nmeditation"      , contens:"OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO", img : require("../res/Lying_meditation.png")},
     ]
 
     const pressContinue = () => {

src/pages/_5_Root.js

@@ -1,35 +1,55 @@
-import React from 'react';
+import React ,{useState} from 'react';
 // import Tab from '../navigation/TabNavigator';
 import C from 'rn-class'
 import Main from '../pages/_6_Main'
+import List from '../pages/_7_List'
 import TabBar from '../components/TabBar'
 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"},  
+    ]
+]
 
 export default (props)=>{
-   
+    let [ sel_idx, setsel_Idx ] =  useState(0);
+    let [ targetIdx, setTargetIdx ] =  useState(0);
+    let onTabPress = (tIdx, i)=>{
+        setsel_Idx(i);
+        setTargetIdx(tIdx);
+    }
+    let Page;
+    if(sel_idx == -1){
+        Page = Main;
+    }else{
+        Page = List;
+    }
+    // Page = List;   
+    
+
+
+
+
     return (
         <C.View cls="flx1 bgc-color-white"> 
             <C.Comp.Header />
-            <Main/>
-            <TabBar/>
+            <Page Pages={sel_idx == -1 ? {} : BTNS[targetIdx][sel_idx]}/>
+            <TabBar onTabPress={onTabPress} BTNS={BTNS}/> 
         </C.View>
     )  
 
 
 }
 
-
-// const Imgs = ()=>{
-//     return (
-//         <C.ImageBackground 
-//             source={{uri : `https://picsum.photos/630/300?r=${(new Date).getTime()+Math.random()}` }}
-//             cls="w45 flx1 h20 mh2.5"  
-//             // resizeMode="contain"
-//         >
-//              <C.View cls="flx1 bgc-rgba-black-0_3 ai-e">
-//                 <C.EL.Icon type="entypo" name="lock" ccls="ma2" {...C.n2cls("color-white")}/>
-//              </C.View>
-//         </C.ImageBackground>
-//     )
-// }

src/pages/_7_List.js

@@ -5,79 +5,13 @@ C.addColor("#d7d7d7", "color-listbg");
 
 
 export default (props)=>{
-   
+   console.log(props); 
     return (
         <C.View cls="flx1 bgc-color-white"> 
-            <C.Comp.Header />
             <C.View cls="w100% ai-c flx1"> 
                 <C.ScrollView>
-
+                <C.Image source={props.Pages.img} resizeMode="contain"  cls="w14" />
                 
-                    {/* main */}
-                    <C.View cls="h28  w100 ai-c pt2">
-                        <C.ImageBackground 
-                                source={{uri : `https://picsum.photos/630/300?r=${(new Date).getTime()+Math.random()}` }}
-                                cls="w80 flx1 h20"  
-                                // resizeMode="contain"
-                                > 
-                            <C.View cls="flx1 bgc-rgba-black-0_3"> 
-                                
-                                    <C.View cls="flx-row w100% jc-sb ph5 pt0.6">
-                                        <C.Text cls="f2.3 color-white txt-sdof2 tsdo-r20 tsdoc-rgba-black-0_9 ">
-                                            오늘의 생각   
-                                        </C.Text>
-                                        <C.Text cls="f2.3 color-white txt-sdof2 tsdo-r20 tsdoc-rgba-black-0_9 ">
-                                            Category 
-                                        </C.Text>
-                                    </C.View>
-
-                                    <C.View cls="w100% ai-c pt1">
-                                        <C.Text cls="f3.4 color-white txt-sdof2 tsdo-r20 tsdoc-rgba-black-0_9 ">
-                                            마음의 양식 
-                                        </C.Text>
-                                        <C.Text cls="f2.2 ta-c w80% flx-w color-white txt-sdof2 tsdo-r20 tsdoc-rgba-black-0_9">
-                                            가나다라마바사아자차카타파하 가나다라마바사아자차카타파하 
-                                        </C.Text>
-                                    </C.View>
-
-                                    <C.View cls="w100% ai-c pt2">
-                                        <C.EL.Icon type={"entypo"} name="controller-play" {...C.n2cls("color-white")} {...C.n2cls("size9")}/>
-                                    </C.View>
-                            </C.View>
-                        </C.ImageBackground>
-
-
-                        
-                    </C.View>
-                    {/* weekday*/}
-                    <C.View cls="w100% mt2 bgc-rgba-gray-dark-0_2 ph3">
-                        <C.Text cls="f2.6">
-                            weekday
-                        </C.Text>
-                    </C.View>
-                    <C.View cls="pt2">
-                         <C.ScrollView horizontal cls="pv1"> 
-                            <Imgs></Imgs> 
-                            <Imgs></Imgs>
-                            <Imgs></Imgs>
-
-                         </C.ScrollView>
-                    </C.View>
-
-
-                    <C.View cls="w100% mt2 bgc-rgba-gray-dark-0_2 ph3">
-                        <C.Text cls="f2.6">
-                            weekend
-                        </C.Text> 
-                    </C.View>
-                    <C.View cls="pt2">
-                         <C.ScrollView horizontal cls="pv1"> 
-                            <Imgs></Imgs> 
-                            <Imgs></Imgs>
-                            <Imgs></Imgs>
-
-                         </C.ScrollView>
-                    </C.View>
 
                 </C.ScrollView>
             </C.View>