add setting / setting page

src/components/Header.js

@@ -5,6 +5,9 @@ import i18n from  "i18n-js";
 import C from 'rn-class'
 
 export default (props) => {
+    const openSetting = () => {
+        props.navigation.navigate('Setting');
+    }
     return (
         <C.EL.Header 
             ccls="bgc-color-transparent"
@@ -13,7 +16,7 @@ export default (props) => {
             rightComponent={
                 <C.View cls="flx-row jc-sa w25 ">
                     <C.EL.Button title="P" ccls="w10" btncls="br19.9"/>
-                    <C.EL.Button title="E" ccls="w10" btncls="br19.9"/>  
+                    <C.EL.Button title="E" ccls="w10" btncls="br19.9" onPress={openSetting}/>  
                  </C.View>
             }
         >

src/i18n/ko.js

@@ -15,6 +15,20 @@ export default {
     },
     TermsPopup : {
         close : "닫기",
+    },
+
+    Setting :{
+        title :"환경설정",
+        "Account Info" : "계정관리",
+        Notice  : "공지사항",
+        FAQ : "FAQ",
+        "Change Language" : "언어 선택",
+        "Help & Support" : "고객센터",
+        "Service Alarm" : "서비스 알람",
+        About : "다붓컨설팅",
+        Version : "Version",
+
     }
 
+
 }

src/navigation/SwitchNavigator.js

@@ -12,6 +12,8 @@ import Guide1 from "../pages/_3_Guide1";
 import Guide2 from "../pages/_4_Guide2";
 import Root from "../pages/_5_Root";
 
+import Setting from "../pages/_10_Setting";
+
 import TermsPopup from '../popup/_1_TermsPopup';
 
 const SwitchNavigator = createSwitchNavigator(
@@ -21,10 +23,11 @@ const SwitchNavigator = createSwitchNavigator(
     Guide1,
     Guide2,
     Root,
+    Setting,
     
   },
   {
-    initialRouteName: "Root"
+    initialRouteName: "Setting"
   }
 );
 

src/pages/_10_Setting.js

@@ -0,0 +1,77 @@
+import React from 'react';
+
+import i18n from  "i18n-js";
+import C from 'rn-class'
+
+
+
+const items = {
+    "Account Info" : {page : "AccountInfo" , Icon : {type:"material-community" , name :"account-settings"}} ,
+    Notice  : {page : "Notice" , Icon : {type:"antdesign" , name :"notification"}} ,
+    FAQ : {page : "FAQ" , Icon : {type:"antdesign" , name :"questioncircle"}} , 
+    "Change Language" : {page : "ChangeLanguage" , Icon : {type:"font-awesome" , name :"language"}} ,
+    "Help & Support" :{page : "Support" , Icon : {type:"antdesign" , name :"customerservice"}} ,
+    "Service Alarm" :{page : "ServiceAlarm" , Icon : {type:"material-community" , name :"alarm-multiple"}} ,
+    About :{page : "About" , Icon : {type:"entypo" , name :"info"}} ,
+
+}
+
+
+export default (props)=>{    
+
+    return (
+        <C.View cls="flx1 bgc-color-white"> 
+             <C.EL.Header 
+                ccls="bgc-color-transparent"
+                leftComponent={<C.Image source={require("../res/header_bubble.png")}  cls="ml2 w10 h10"  resizeMode="contain" />}  
+                centerComponent={<C.Text cls="f3 fw-b ">{i18n.t(`Setting.title`)}</C.Text>}
+                rightComponent={
+                    <C.View cls="flx-row jc-sa w20 ">
+                        <C.EL.Icon  name="ios-arrow-back" type="ionicon"/> 
+                        {/* title="P" ccls="w10" btncls="br19.9"/> */}
+                    </C.View>
+                }
+            >
+            </C.EL.Header>
+            <C.View cls="w100% ai-c flx0.9 ">       
+                <C.ScrollView cccls="ai-c h100 w100" flx="flx1  bgc-test">  
+                    {
+                        Object.keys(items).map((key , idx )=>{
+                            
+                            let o =  items[key];
+                            return (
+                                <ItemView key={`item_${idx}`} {...props} data={o}  itemKey={key} ></ItemView>
+                            ) 
+                        })
+                    }
+                </C.ScrollView>
+            </C.View>  
+                <C.View cls="ai-c flx0.1 jc-c" >
+                    <C.Text cls="fw-b">
+                    Version 1.11
+                    </C.Text>
+                    <C.Text>
+                    Logged in as DABUT@gmail.com
+                    </C.Text>
+                </C.View>
+        </C.View>
+    )  
+}
+
+const ItemView = ( props) =>{
+    let {itemKey , data} = props;
+    
+    console.log(itemKey);    
+    return ( 
+        <C.EL.ListItem cls="w100"
+        title={i18n.t(`Setting.${itemKey}`)}
+        subtitle={itemKey}
+        leftIcon={ <C.EL.Icon {... data.Icon} raised />} 
+        >
+                {/* <C.EL.Icon />
+            
+                <C.Text>{itemKey}</C.Text> */}
+            
+        </C.EL.ListItem>
+    )
+}

src/pages/_5_Root.js

@@ -44,7 +44,7 @@ export default (props)=>{
 
     return (
         <C.View cls="flx1 bgc-color-white"> 
-            <C.Comp.Header />
+            <C.Comp.Header  {...props}/>
             <Page Pages={sel_idx == -1 ? {} : BTNS[targetIdx][sel_idx]}/>
             <TabBar onTabPress={onTabPress} BTNS={BTNS}/> 
         </C.View>

src/pages/_7_List.js

@@ -5,7 +5,6 @@ C.addColor("#d7d7d7", "color-listbg");
 
 
 export default (props)=>{
-   console.log(" >>>>>>>>>>>>>: " , props.Pages);   
     return (
         <C.View cls="flx1 bgc-color-white"> 
             <C.View cls="w100% ai-c flx1">     
@@ -14,7 +13,6 @@ export default (props)=>{
                         <C.Image source={props.Pages.img} resizeMode="contain"  cls="w14" /> 
                         <C.View>
                             <C.View cls="bgc-color-gray-light-v3 flx0.1 jc-c ph3">   
-                                <C.Text cls="f2">{ props.Pages.contensTitle}</C.Text> 
                             </C.View>
                             <C.Text cls="mt2 mh2">
                                 {props.Pages.contens}