React-Native 개발일지 - [ 네비게이터 ]

리액트 네이티브 애플리케이션에서 사용자의 화면 전환을 효율적으로 처리하기 위해 네비게이터를 설정하는 것은 매우 중요합니다. 본 글에서는 createStackNavigator와 createBottomTabNavigator를 활용하여 네비게이터를 구성하는 방법과, 이를 통해 네비게이터를 아래에 고정시키는 방법에 대해 설명하겠습니다.

네비게이터 구조

1. Stack Navigator
   Stack.Navigator는 화면 간의 전환을 관리하는 데 사용됩니다. 각 화면은 스택 구조로 쌓이며, 사용자가 이전 화면으로 돌아갈 수 있도록 해줍니다. 위의 코드에서는 AuthStack과 HomeStack을 정의하여 로그인, 회원가입 등 인증 관련 화면과 홈, 다이어리 작성 등 주요 기능을 담고 있는 화면을 관리합니다.

const AuthStack = createStackNavigator();
<AuthStack.Navigator
    initialRouteName="Login"
    screenOptions={{
    headerShown: false,
    cardStyle: { backgroundColor: '#fff' },
    }}
>
    <AuthStack.Screen name="Login" component={LoginScreen} />
    <AuthStack.Screen name="Register" component={RegisterScreen} />
    <AuthStack.Screen name="SignUp" component={SignUpScreen} />
    <AuthStack.Screen name="Main" component={MainTabNavigator} />
</AuthStack.Navigator>

2. Bottom Tab Navigator
   BottomTabNavigator는 하단에 탭을 고정하여 사용자가 쉽게 여러 화면 간에 전환할 수 있도록 합니다. 코드에서는 MainTabNavigator를 정의하여 홈, 검색, 작성, 채팅, 내 정보와 같은 주요 기능을 탭으로 제공합니다.

const Tab = createBottomTabNavigator();
function MainTabNavigator(): React.JSX.Element {
    return (
    <Tab.Navigator
        screenOptions={({ route }) => ({
            headerShown: false,
            tabBarActiveTintColor: '#F5BFD9',
            tabBarInactiveTintColor: '#999',
            tabBarStyle: styles.tabBarStyle,
            tabBarIcon: ({ focused }) => (

            ),
        })}
    >
        <Tab.Screen name="Home" component={HomeStack} />
        <Tab.Screen name="Search" component={SearchScreen} />
        <Tab.Screen name="Write" component={WriteStack} />
        <Tab.Screen name="Chat" component={ChatStack} />
        <Tab.Screen name="MyInfo" component={MyInfoScreen} />
    </Tab.Navigator>
    );
}

네비게이터 고정 방법

네비게이터를 아래에 고정시키는 방법은 Tab.Navigator의 screenOptions에서 tabBarStyle을 설정하여 구현할 수 있습니다. 위 코드의 tabBarStyle에서 height를 지정하여 탭 바의 높이를 고정하고, 배경 색상을 설정할 수 있습니다. 이렇게 하면 사용자 인터페이스의 일관성을 유지하면서 사용자가 쉽게 접근할 수 있는 하단 탭을 제공합니다.

const styles = StyleSheet.create({
    tabBarStyle: {
        backgroundColor: '#fff',
        height: 80, // % 대신 px로 고정
    },
    icon: {
        width: 24,
        height: 24,
    },
});

결론

리액트 네이티브에서 네비게이터를 설정하는 것은 사용자 경험을 향상시키는 중요한 요소입니다. StackNavigator와 BottomTabNavigator를 적절히 활용하여 애플리케이션의 구조를 명확하게 하고, 사용자에게 친숙한 인터페이스를 제공할 수 있습니다. 하단 탭을 고정시키는 방법을 통해 사용자는 언제든지 주요 기능에 빠르게 접근할 수 있습니다.
이와 같은 방법으로 애플리케이션의 네비게이션을 구성해 보세요!