React Native

React native Drawer 커스텀 메뉴

Machine_웅 2020. 1. 28. 13:33
728x90
반응형
// 옆에 사이드에서 보여지는것 ( 드로어 네비게이터 메뉴 )
const Main_Draw_View = createDrawerNavigator(
    {
        Main_View,

        Intro_Main : {
            screen : Intro_Main
        },

        CalenderMain:{
            screen :CalenderMain
        },

        BoardMain :{
            screen: BoardMain
        }
    },{

        drawerWidth: Dimensions.get("window").width * 0.5,

        contentComponent : SideMenu,

        contentOptions:{
            // activeBackgroundColor:'#32C5E6'
            activeTintColor : '#32C5E6'
        }
    }
)

contentComponent :  커스텀 할 뷰 이름

 

 

SideMenu

import React, {Component} from 'react';
import {NavigationActions} from 'react-navigation';
import {ScrollView, Text, View} from 'react-native';

class SideMenu extends Component {
  navigateToScreen = (route) => () => {
    const navigateAction = NavigationActions.navigate({
      routeName: route
    });
    this.props.navigation.dispatch(navigateAction);
  }

  render () {
    return (
      <View >
        <ScrollView>
          <View>
            <Text>
              Section 1
            </Text>
            <View >
              <Text  onPress={this.navigateToScreen('Main_View')}>
                메인 
              </Text>
            </View>
          </View>
          <View>
            <Text>
              Section 2
            </Text>
            <View >
              <Text onPress={this.navigateToScreen('Intro_Main')}>
                회사소개
              </Text>
              <Text  onPress={this.navigateToScreen('CalenderMain')}>
                일정
              </Text>
              <Text  onPress={this.navigateToScreen('BoardMain')}>
                게시판
              </Text>

              <Text  onPress={this.navigateToScreen('UserAccount')}>
                테스트
              </Text>
            </View>
          </View>
        </ScrollView>
        <View >
          <Text>This is my fixed footer</Text>
        </View>
      </View>
    );
  }
}


export default SideMenu;

 

728x90
반응형