디렉토리 구조
Bottom Tab 구조
npm i @react-navigation/bottom-tabs
npm i @react-navigation/native
npm i react-native-safe-area-context
npm i react-native-screens
npm i @react-native-community/picker // Picker
Bash
복사
pod install
Bash
복사
iOS, Android 앱 재실행 필요
Root
index.ts
/**
* @format
*/
import { AppRegistry } from 'react-native';
import { name as appName } from './app.json';
import MainTabScreen from './src/screen/MainTabScreen';
AppRegistry.registerComponent(appName, () => MainTabScreen);
TypeScript
복사
mainTabScreen.tsx
import React from "react";
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { NavigationContainer } from "@react-navigation/native";
import AlarmManagementScreen from "./AlarmManagementScreen";
import HistoryScreen from "./HistoryScreen";
import MoreScreen from "./MoreScreen";
const Tab = createBottomTabNavigator();
function MainTabScreen() {
return (
<NavigationContainer>
<Tab.Navigator>
<Tab.Screen name="등록" component={AlarmManagementScreen} />
<Tab.Screen name="알림" component={HistoryScreen} />
<Tab.Screen name="더보기" component={MoreScreen} />
</Tab.Navigator>
</NavigationContainer>
);
}
export default MainTabScreen;
TypeScript
복사