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 (); function ({navigation}) { return ( <View> <Text>Home</Text> <Button title="Detail 1 열기" onPress={() => navigation. ('Detail', { id: 1, }) } /> </View> ); } function () { return ( <View> <Text>Search</Text> </View> ); } function () { return ( <View> <Text>Notification</Text> </View> ); } function () { return ( <View> <Text>Message</Text> </View> ); } function () { return ( <Tab.Navigator initialRouteName="Home" screenOptions={{ tabBarActiveTintColor: '#fb8c00', tabBarShowLabel: false, }}> <Tab.Screen name="Home" component={HomeScreen} options={{ title: '홈', ({color, size}) => ( <Icon name="home" color={color} size={size} /> ), }} /> <Tab.Screen name="Search" component={SearchScreen} options={{ title: '검색', ({color, size}) => ( <Icon name="search" color={color} size={size} /> ), }} /> <Tab.Screen name="Notification" component={NotificationScreen} options={{ title: '알림', ({color, size}) => ( <Icon name="notifications" color={color} size={size} /> ), }} /> <Tab.Screen name="Message" component={MessageScreen} options={{ title: '메시지', ({color, size}) => ( <Icon name="message" color={color} size={size} /> ), }} /> </Tab.Navigator> ); } export default MainScreen;