[ReactNative_study_3] Navigator_Tabs / Color mode

1)  Tabs Navigator 사용법

https://reactnavigation.org/docs/getting-started/ 해당 사이트에 가이드를 보면서 진행

 

설치 , 윈도우 안드로이드 기준

npm install @react-navigation/native

expo install react-native-screens react-native-safe-area-context

npm install react-native-screens react-native-safe-area-context ( CRNA 라면 깔필요없음)

 Tab 네비게이터 설치 - npm install @react-navigation/bottom-tabs

 

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
// improt 후 Tab 를 만든다음에 아래와 같이 해주면된다 
const Tab = createBottomTabNavigator(); 

export default function App() {
return (
<NavigationContainer>
      <Tab.Navigator>
          <Tab.Screen name="Home" component={HomeScreen} />
          <Tab.Screen name="Settings" component={SettingsScreen} />
     </Tab.Navigator>
</NavigationContainer>
);
}

 

여기서 기억해야 될 것은 설정을 변경해주는 props 인데, 가이드 API Reference --> Navigators  안에보면 설명이 있고

screenOptions와 options가 있으며, screenOptions - Tab.navigator에 써주고 모든 스크린에 다 적용되며, options는 - Tab.screen에 써주며 해당하는 특정 screen에 적용된다.

 

 

 

2)  Color Theme 변경

1) Apeearance 모듈에서 가능 (https://reactnative.dev/docs/appearance)

2) useClorScheme 리액트 hook 사용 (https://reactnative.dev/docs/usecolorscheme)

   아래와 같이 모드를 가져와서 isDark 일 때 screenOptions / Options 들의 색깔을 적절하게 바꿔준다.

 

const isDark=useColorScheme()==="dark";

 

  * 안드로이드 AVD 애뮬레이터에서 DARK모드를 끄고 키는 것은 SHEEL 에서 다음 명령어 입력

 (https://stackoverflow.com/questions/54281781/how-to-enable-dark-mode-on-emulator)

 

adb shell "cmd uimode night yes"
adb shell "cmd uimode night no"

3) 간단히 구현하려면 theme props를 사용한다.

 import { NavigationContainer,DarkTheme,DefaultTheme } from '@react-navigation/native'; 

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

  return (
    <NavigationContainer theme={isDark?DarkTheme:DefaultTheme}>
      <Tabs></Tabs>
    </NavigationContainer>
  );
  
//받는 Tabs navigator 쪽에서는 screenOptions / Options 를 아무것도 안해줘도 스타일이 변경된다.

 

* 추가로 expo 에서 확인해 보려고 android 스마트폰에서 다크모드를 변경해도 안될 때 app.json을 아래와 같이 수정한다.

{
  "expo": {
    "name": "movies",
    "slug": "movies",
    "version": "1.0.0",
    "assetBundlePatterns": [
      "**/*"
    ],
    "description": "",
    "userInterfaceStyle": "automatic",
    "ios": {
      "userInterfaceStyle": "automatic"
    },
    "android": {
      "userInterfaceStyle": "automatic"
    }
  },
  "name": "noovies"
}