screens/MainScreen.js

    import React from 'react';
    import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs';
    import {Text, Button, View} from 'react-native';
    import Icon from 'react-native-vector-icons/MaterialIcons';
    
    const Tab = createMaterialTopTabNavigator();
    
    (...)
    
    function MainScreen() {
      return (
        <Tab.Navigator
          initialRouteName="Home"
          screenOptions={{
            tabBarShowLabel: false,
          }}>
          <Tab.Screen
            name="Home"
            component={HomeScreen}
            options={{
              tabBarIcon: ({color}) => <Icon name="home" color={color} size={24} />,
            }}
          />
          <Tab.Screen
            name="Search"
            component={SearchScreen}
            options={{
              tabBarIcon: ({color}) => (
                <Icon name="search" color={color} size={24} />
              ),
            }}
          />
          <Tab.Screen
            name="Notification"
            component={NotificationScreen}
            options={{
              tabBarIcon: ({color}) => (
                <Icon name="notifications" color={color} size={24} />
              ),
            }}
          />
          <Tab.Screen
            name="Message"
            component={MessageScreen}
            options={{
              tabBarIcon: ({color}) => (
                <Icon name="message" color={color} size={24} />
              ),
            }}
          />
        </Tab.Navigator>
      );
    }
    
    export default MainScreen;

    코드를 저장한 뒤, yarn iosyarn android 명령어를 다시 입력하여 시뮬레이터를 재시작하세요.

    신간 소식 구독하기
    뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.