탭 네비게이션

스택 네비게이션을 탭 네비게이션으로 수정해보자.

탭 네비게이션을 위해서는 모듈을 추가적으로 설치 해야 한다.

npx expo install @react-navigation/bottom-tabs

전체 코드를 보여주고 변경된 부분을 하나씩 알아 본다.

https://github.com/hisimpson1/ReactiveNative_test/blob/main/reactnative_base/tutorial08/App.js

App.js

import * as React from 'react';
import { Button, Text, View } from 'react-native';
import { NavigationContainer, useNavigation, useRoute } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

function HomeScreen() {
const navigation = useNavigation();

return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>홈 화면</Text>
      <Button
        title="상세 화면으로 이동 (데이터 전달)"
        onPress={() =>
          navigation.navigate('Details', {
            userName: '홍길동',
            age: 25,
          })
        }
      />
    </View>
);
}

function DetailsScreen() {
const navigation = useNavigation();
const route = useRoute();

const { userName, age } = route.params || {};

return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>상세 화면</Text>
      {userName && <Text>이름: {userName}</Text>}
      {age && <Text>나이: {age}</Text>}
      <Button
        title="홈으로 돌아가기"
        onPress={() => navigation.navigate('Home')}
      />
    </View>
);
}

export default function App() {
return (
    <NavigationContainer>
      <Tab.Navigator initialRouteName="Home">
        <Tab.Screen name="Home" component={HomeScreen} options={{ title: '홈' }} />
        <Tab.Screen name="Details" component={DetailsScreen} options={{ title: '상세' }} />
      </Tab.Navigator>
    </NavigationContainer>
);
}

변경 포인트 ✨

임포트 할때는 native-stack대신 bottom-tabs를 임포트 한다.
createNativeStackNavigator → createBottomTabNavigator로 교체.
Stack.Navigator → Tab.Navigator.
Stack.Screen → Tab.Screen.
navigation.goBack() 대신 navigation.navigate('Home') 사용 (탭 구조에서는 goBack이 직관적이지 않음).

️>>> 이렇게 하면 화면 하단에 탭이 생기고, Home과 Details를 탭으로 이동할 수 있습니다.

수정전
import { createNativeStackNavigator } from '@react-navigation/native-stack';
수정후
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

수정전
const Stack = createNativeStackNavigator();
수정후
const Tab = createBottomTabNavigator();

수정전
onPress={() => navigation.goBack()}
수정후
onPress={() => navigation.navigate('Home')}

수정전
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} options={{ title: '홈' }} />
        <Stack.Screen name="Details" component={DetailsScreen} options={{ title: '상세' }} />
      </Stack.Navigator>
수정후
      <Tab.Navigator initialRouteName="Home">
        <Tab.Screen name="Home" component={HomeScreen} options={{ title: '홈' }} />
        <Tab.Screen name="Details" component={DetailsScreen} options={{ title: '상세' }} />
      </Tab.Navigator>