screens/MainScreen.js

    import React from 'react';
    import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
    import {Text, View, Button} from 'react-native';
    import Icon from 'react-native-vector-icons/MaterialIcons';
    
    const Tab = createBottomTabNavigator();
    
    function HomeScreen({navigation}) {
      return (
        <View>
          <Text>Home</Text>
          <Button
            title="Detail 1 열기"
            onPress={() =>
              navigation.push('Detail', {
                id: 1,
              })
            }
          />
        </View>
      );
    }
    
    function SearchScreen() {
      return (
        <View>
          <Text>Search</Text>
        </View>
      );
    }
    
    function NotificationScreen() {
      return (
        <View>
          <Text>Notification</Text>
        </View>
      );
    }
    
    function MessageScreen() {
      return (
        <View>
          <Text>Message</Text>
        </View>
      );
    }
    
    function MainScreen() {
      return (
        <Tab.Navigator
          initialRouteName="Home"
          screenOptions={{
          tabBarActiveTintColor: '#fb8c00',
          tabBarShowLabel: false,
        }}>
        <Tab.Screen
          name="Home"
          component={HomeScreen}
          options={{
            title: '홈',
            tabBarIcon: ({color, size}) => (
              <Icon name="home" color={color} size={size} />
            ),
          }}
        />
        <Tab.Screen
          name="Search"
          component={SearchScreen}
          options={{
            title: '검색',
            tabBarIcon: ({color, size}) => (
              <Icon name="search" color={color} size={size} />
             ),
           }}
         />
         <Tab.Screen
           name="Notification"
           component={NotificationScreen}
           options={{
             title: '알림',
             tabBarIcon: ({color, size}) => (
                <Icon name="notifications" color={color} size={size} />
             ),
           }}
         />
         <Tab.Screen
           name="Message"
             component={MessageScreen}
             options={{
               title: '메시지',
               tabBarIcon: ({color, size}) => (
                 <Icon name="message" color={color} size={size} />
               ),
             }}
           />
         </Tab.Navigator>
      );
    }
    
    export default MainScreen;
    신간 소식 구독하기
    뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.