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
반응형
'React Native' 카테고리의 다른 글
React native file전송 (0) | 2020.01.31 |
---|---|
React native issue 탭 네비게이션 헤더 문제. (0) | 2020.01.29 |
React native Drawer Navigator 안에 StackNavigator 넣기 (0) | 2020.01.27 |
React native Drawer Navigator 헤더에서 서랍 열기 (0) | 2020.01.27 |
react-native 해더 중앙 정렬 및 버튼 (0) | 2020.01.27 |