더북(TheBook)

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;
신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.