전체 화면의 레이아웃 중 하단의 메뉴를 넣으려고 했다.
일단 현재까지의 폴더 구성 환경
아직 엉망진창이다. 파일 구조를 명확하게 나누고 싶어서 이것저것 시도하다 보면, 이전 방식 중 참고하고 싶던 내용까지 까먹어서, 기록해 둘 예정
일단 하단 tab에 구성될 화면인데,
navigation/index.js
import { NavigationContainer } from '@react-navigation/native'
import Tabs from './tabs'
export default function Navigation({ props }) {
return (
<NavigationContainer>
<Tabs />
</NavigationContainer>
)
}
navagation/tabs.js
import * as React from 'react'
import Ionicons from 'react-native-vector-icons/Ionicons'
import { createNativeStackNavigator } from '@react-navigation/native-stack'
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
import { ThemeProvider } from 'styled-components/native'
import HomeScreen from '../screen/homeScreen'
const Stack = createNativeStackNavigator()
const Tab = createBottomTabNavigator()
export default function Tabs({ props }) {
return (
<Tab.Navigator
screenOptions={({ route }) => ({
tabBarIcon: ({ focused, color, size }) => {
let iconName
if (route.name === 'Home') {
iconName = focused ? 'home' : 'home-outline'
}
// You can return any component that you like here!
return <Ionicons name={iconName} size={size} color={color} />
},
tabBarActiveTintColor: '#845EC2',
tabBarInactiveTintColor: '#845EC2',
tabBarStyle: {
justifyContent: 'center',
alignItems: 'center',
position: 'absolute',
bottom: 25,
left: 20,
right: 20,
color: 'red',
elevation: 0,
borderRadius: 13,
},
})}
>
<Tab.Screen
name='Home'
component={HomeScreen}
options={{ title: '홈', headerShown: false }}
/>
</Tab.Navigator>
)
}
하단의 네비게이션 탭을 만들기 위해서,
createBottomTabNavigator가 필요하므로, 이를 설치해 주었다.
yarn add @react-navigation/bottom-tabs
<Tab.Navigator>
은 <NavigationContainer>
에게 감싸져야 하는데, index.js 와 tab.js로 구분하였다.
Tab.Navigator를 커스텀 하기 위해서, screenOptions의 tabBarStyle 속성을 커스텀 해주면 된다.
ThemeProvider를 사용해서, 사용자의 라이트 모드와, 다크모드를 구분하여 테마 색상을 꾸며주려고 하는데, 현재 네비게이션 탭 내에서 테마 속성을 못 읽어내서 애를 먹고 있다. 이것도 꼭 해결해 봐야지.
<Tab.Screen>
의 options 속성에서 headerShown을 하여 제목 틀을 안보이게 변경해주었는데, <Tab.Navigator>
태그 내의 속성으로도 충분히, 안보이게 할 수 있다. 스크린마다 달라서, 개별로 설정해 준 것 !