npm install @react-navigation/native
npm install @react-native-screens-react-native-safe-area-context
npm install @react-navigation/bottom-tabs
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
const Tab = createBottomTabNavigator();
export default const App = () => {
return (
<NavigationContainer>
<Tab.Navigator>
<Tab.Screen
name="Home"
component={HomeScreen}
/>
<Tab.Screen
name="Settings"
component={SettingsScreens}
/>
</Tab.Navigator>
</NavigationContainer>
}
기억해야 될 것은 설정을 변경해주는 props 인데,
가이드 API Reference --> Navigators 안에보면 설명이 있고
screenOptions와 options가 있으며,
screenOptions - Tab.navigator에 써주고 모든 스크린에 다 적용되며, options는 - Tab.screen에 써주며 해당하는 특정 screen에 적용된다.
const isDark=useColorScheme()==="dark";
import { NavigationContainer,DarkTheme,DefaultTheme } from '@react-navigation/native';
// 를 사용한다음에 NvigationContainer로 theme props를 넘겨주기만 하면 저절로 스타일이 적용됨.
return (
<NavigationContainer theme={isDark?DarkTheme:DefaultTheme}>
<Tabs></Tabs>
</NavigationContainer>
);