Navigator(Tab) / Color Mode

김수영·2022년 4월 25일
0

React Native

목록 보기
2/5
  • 설치
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에 적용된다.

Color Theme

  1. Appearance 모듈에서 가능
  2. useColorScheme hook 사용 가능
const isDark=useColorScheme()==="dark";
import { NavigationContainer,DarkTheme,DefaultTheme } from '@react-navigation/native'; 

// 를 사용한다음에 NvigationContainer로 theme props를 넘겨주기만 하면 저절로 스타일이 적용됨.

  return (
    <NavigationContainer theme={isDark?DarkTheme:DefaultTheme}>
      <Tabs></Tabs>
    </NavigationContainer>
  );
  
profile
기술과 인문학의 교차점

0개의 댓글