[React Native] 02. 폴더구성 + 네비게이션 꾸미기

hidden_·2022년 11월 22일
0

전체 화면의 레이아웃 중 하단의 메뉴를 넣으려고 했다.
일단 현재까지의 폴더 구성 환경

아직 엉망진창이다. 파일 구조를 명확하게 나누고 싶어서 이것저것 시도하다 보면, 이전 방식 중 참고하고 싶던 내용까지 까먹어서, 기록해 둘 예정

일단 하단 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> 태그 내의 속성으로도 충분히, 안보이게 할 수 있다. 스크린마다 달라서, 개별로 설정해 준 것 !

profile
steady

0개의 댓글