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
반응형