[React-native] tab + draw navigator

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button
        onPress={() => navigation.navigate('Notifications')}
        title="Go to notifications"
      />
    </View>
  );
}
function HomeScreen2({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button
        onPress={() => navigation.navigate('Notifications')}
        title="Go to notifications"
      />
    </View>
  );
}
function HomeScreen3({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button
        onPress={() => navigation.navigate('Notifications')}
        title="Go to notifications"
      />
    </View>
  );
}
function SettingsScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Settings!</Text>
    </View>
  );
}
function SideMenu01({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button
        onPress={() => navigation.navigate('Notifications')}
        title="Go to notifications"
      />
    </View>
  );
}

function SideMenu02({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button onPress={() => navigation.goBack()} title="Go back home" />
    </View>
  );
}
const Drawer = createDrawerNavigator();

const CustomDrawerContent = (props) => (
  <SafeAreaView style = {{flex : 1}}>
    <ScrollView>
      <TouchableOpacity onPress ={() => props.navigation.navigate('Menu')}>
        <Text> Menu</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress ={() => props.navigation.navigate('SideMenu01')}>
        <Text> SideMenu01</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress ={() => props.navigation.navigate('SideMenu02')}>
        <Text> SideMenu02</Text>
      </TouchableOpacity>
    </ScrollView>
  </SafeAreaView>
)
export default function App() {
  const Tab = createBottomTabNavigator();

  const TabScreen = () => (
    <Tab.Navigator
        screenOptions={({ route }) => ({
          tabBarIcon: ({ focused, color, size }) => {
            let iconName;

            if (route.name === 'Home') {
              iconName = focused
                ? 'ios-information-circle'
                : 'ios-information-circle-outline';
            } else if (route.name === 'Settings') {
              iconName = focused ? 'ios-list' : 'ios-list';
            }
            return <Ionicons name={iconName} size={size} color={color} />;
          },
          tabBarActiveTintColor: 'tomato',
          tabBarInactiveTintColor: 'gray',
        })}
      >
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
        <Tab.Screen name="Settings1" component={SideMenu01} />
        <Tab.Screen name="Settings2" component={SideMenu02} />
        <Tab.Screen name="Home2" component={HomeScreen2} />


      </Tab.Navigator>
  )
  return (
    <NavigationContainer>
      <Drawer.Navigator
        initialRouteName="Menu"
        drawerContent={props => <CustomDrawerContent{...props} />}
        // screenOptions={{
        //   headerShown: false,
        // }}
        // 상단 바 숨키기
      >
        <Drawer.Screen name="Menu" component={TabScreen} />
        <Drawer.Screen name="SideMenu01" component={SideMenu01} />
        <Drawer.Screen name="SideMenu02" component={SideMenu02} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}