안녕하세요
저는 navigation 에 대한 기초가 사실 부족합니다.
감안해서 봐주시면 감사하겠습니다
앱의 모습은 이렇습니다
.
.
.
수정 - [위의 사진 두장, 바로 아래 설명↓을 수정하였습니다.]
제가 하고싶은 것은 하단 탭의
“메뉴” 버튼을 눌렀을 때 왼쪽에서 “drawer navigation” 이 열리는 것 입니다.
정확하게 지적은 못하시더라도 대충 어떻게 해야한다라는 방향이라도 잡아주시면 정말 감사하겠습니다.
사실 현재는 앱이 에러에도 걸려있습니다.
아래는 관련 코드입니다. (총 2개)
- 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);
/
/
/
- 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);
