[navigation 질문] createBottomTabNavigator 안에서 drawer 를 여는 방법이 궁금합니다

[addh12]

안녕하세요
저는 navigation 에 대한 기초가 사실 부족합니다.

감안해서 봐주시면 감사하겠습니다

앱의 모습은 이렇습니다

.
.
.

수정 - [위의 사진 두장, 바로 아래 설명↓을 수정하였습니다.]
제가 하고싶은 것은 하단 탭의
“메뉴” 버튼을 눌렀을 때 왼쪽에서 “drawer navigation” 이 열리는 것 입니다.
정확하게 지적은 못하시더라도 대충 어떻게 해야한다라는 방향이라도 잡아주시면 정말 감사하겠습니다.

사실 현재는 앱이 에러에도 걸려있습니다.

아래는 관련 코드입니다. (총 2개)

1. AppBottomTabNavigator.js (사진) ↓

위의 코드 ↓ (텍스트)

import React from “react”;
import { createBottomTabNavigator,
createAppContainer,
} from ‘react-navigation’;
// You can import Ionicons from @expo/vector-icons if you use Expo or
// react-native-vector-icons/Ionicons otherwise.
import { Ionicons } from ‘@expo/vector-icons’;
import { DrawerActions } from ‘react-navigation-drawer’;
import { createStack } from “./createStack”;
import { AppDrawerNavigator } from “./AppDrawerNavigator”;

import HomeScreen from “…/screens/Home”;
import MyScreen from “…/screens/My”;
import SearchScreen from “…/screens/Search”;
import LatestScreen from “…/screens/Latest”;
import BasketScreen from “…/screens/Basket”;

export const AppBottomTabNavigator = createBottomTabNavigator({
홈 : {
screen: createStack(HomeScreen, “홈”),
navigationOptions: {
tabBarIcon: ({ tintColor }) => (

)
}
},
메뉴 : {
screen: AppDrawerNavigator,
navigationOptions: ({ navigation }) => ({
tabBarIcon: ({ tintColor }) => (
<Ionicons name=“md-menu” color={tintColor} size={24}
onPress={() => {navigation.toggleDrawer()}} />
)
})
},
검색 : {
screen: createStack(SearchScreen, “검색”),
navigationOptions: {
tabBarIcon: ({ tintColor }) => (

)
}
},
My : {
screen: createStack(MyScreen, “My”),
navigationOptions: {
tabBarIcon: ({ tintColor }) => (

)
}
},
장바구니 : {
screen: createStack(BasketScreen, “장바구니”),
navigationOptions: {
tabBarIcon: ({ tintColor }) => (

)
}
},
최근 : {
screen: createStack(LatestScreen, “최근에 본 상품”),
navigationOptions: {
tabBarIcon: ({ tintColor }) => (

)
}
}
})

export default createAppContainer(AppBottomTabNavigator);

/
/
/

2. AppDrawerNavigator.js (사진) ↓

위의 코드 ↓ (텍스트)

import { createDrawerNavigator, createAppContainer } from “react-navigation”;
import HomeScreen from “…/screens/Home”;

const AppDrawerNavigator = createDrawerNavigator({
Tabs: { screen: HomeScreen }
},{
drawerWidth : 320
}
)

export default createAppContainer(AppDrawerNavigator);

[codejong (코드종)]

내용에 대한 답변은 아닙니다.
코드를 넣을 때 markdown 코드 삽입 문법을 사용하시면 코드를 이쁘게 넣을 수 있어요. 다음 링크도 참고하세요.

[포럼 사용 팁] 코드 이쁘게 넣는 방법 - 마크다운, BBCode

<Alloy> <Window class="sss"></Window> </Alloy> var a=3; function(){ } 위에서 말한 방법 말고 코드 위 아래에 ``` 추가하면 위에 처럼 더 이쁘게 나오네요.^^ 위 코드는 아래와 같이 입력했을 때 위와 같이 나왔습니다. ``` <Alloy> <Window class="sss"></Window> </Alloy> ``` ``` var a=3; function(){ } ```

[codejong (코드종)]

질문이 하나 있어요.
왜 하단 탭을 눌렀을 때 drawer를 열려고 하나요? 저렇게 동작하는 것은 기본 탭이나 drawer 동작과 다릅니다. 특별히 다르게한 이유가 있나요?

제가 react-nativgation을 사용하지 않아서 정확히는 잘못된 정보일 수 있지만 에러 메시지를 봤을 때 예상되는 문제점은
AppDrawerNavigator.js 에서 아래와 같이 변경해 보세요.

// export default createAppContainer(AppDrawerNavigator); //이거 대신에
export default AppDrawerNavigator; // 이렇게 해보세요.

tab의 메뉴에 붙이는 screen은 일반 React Component이거나 navigator(stack, drawer, tab 등…)여야 할 겁니다.

[addh12]

감사합니다. 참고하겠습니다!

[addh12]

답변 정말 감사합니다.

일단은 해결이 되었습니다.
현재, “메뉴” 버튼을 클릭하면 drawer가 나옵니다.
이 질문에서는 단순히 “메뉴” 버튼을 누르면 drawer가 나오도록 동작시키고 싶었습니다.

사실 제가 구현하고 싶은것은 이커머스 앱인 “G마켓”, “G9” 의 하단 탭을 살펴보시면 이해가 빠르실 것 같습니다.
예를들면, “My” 버튼에서 “메뉴” 버튼을 눌렀을때, “My” 화면에서 drawer가 나오도록 하는 것 입니다. 감사합니다!

추가(수정)- 다시 이커머스 여러 앱들을 살펴보니, 하단 탭의 메뉴버튼 클릭시, 모든 앱들이 새로운 screen으로 열리더군요. 저도 그렇게 해야겠습니다.