[React-native CLI] RN 현재 화면이 어디인지에 따라 상태바 색상 변경하기

이번에는 상태바를 설정해보려 합니다.

일반적인 상태바는 아니고 홈화면일 때는 상태바가 주황색, 홈화면이 아닌 다른 화면일 때에는 상태바가 흰색으로 변하게 해주었습니다.

 

 

처음에는 상태바를 App.tsx에 설정하고 싶었지만 App.tsx에 상태바를 설정해 두면

Navigation에 따른 상태바 배경색을 변경할 수 없기 때문에 StackNavigator.tsx에 해주었습니다.

StackNavigator.tsx는 스택내비게이션을 모아둔 곳입니다.

 

StatusBar 설정

---

const StackNavigator = () => {
  const Stack = createNativeStackNavigator();

  return (
    <>
      <StatusBar
        backgroundColor={'#fff'}
        barStyle={'dark-content'}
      />
      <Stack.Navigator>
        <Stack.Screen
          name="Main"
          component={BottomTabsNavigator}
          options={{headerShown: false}}
        />
        <Stack.Screen
          name="Record"
          component={Record}
          options={{headerShown: false}}
        />
      </Stack.Navigator>
    </>
  );
};

export default StackNavigator;

Fragment로 감싸고 StatusBar를 넣어주면 잘 작동이 됩니다.

 

상태바 커스텀 참고 블로그

---

https://velog.io/@ttoottie/RN-Status-Bar%EC%97%90-%EC%8A%A4%ED%83%80%EC%9D%BC%EC%9D%84-%EC%A0%81%EC%9A%A9%ED%95%B4%EB%B3%B4%EC%9E%90-9xp185ny

[RN] Status Bar에 스타일을 적용해보자

 

현재 페이지 이름 출력하기

---

현재 페이지 이름을 출력하기 위해서는 아래코드를 넣어주면 됩니다.

const navigation = useNavigation();

// 현재 화면의 이름을 가져옵니다.
const currentRouteName = navigation.getCurrentRoute().name;

 

하지만 이렇게 넣어주면 이와 같은 오류가 발생하게 됩니다.

TypeError: Cannot read property 'name' of undefined This error is located at: in StackNavigator (created by App) in EnsureSingleNavigator in BaseNavigationContainer in ThemeProvider in NavigationContainerInner (created by App) in RecoilRoot_INTERNAL (created by RecoilRoot) in RecoilRoot (created by App) in App in RCTView (created by View) in View (created by AppContainer) in RCTView (created by View) in View (created by AppContainer) in AppContainer in taxi(RootComponent), js engine: hermes

 

오류 해결하기

---

이 오류는 내비게이션 상태 객체가 아직 정의되지 않았기 떄문에 발생하는 오류입니다.

위에 코드만 써주게 되면 navigation.getCurrentRoute() 메서드가 호출될 때 네비게이션 상태가 아직 초기화되지 않았기 때문에 오류가 발생하게 됩니다.

이를 해결하기 위해 네비게이션 이벤트를 구독하여 상태를 업데이트해야 됩니다.

  const navigation = useNavigation();
  const [currentRouteName, setCurrentRouteName] = useState('');

  // 현재 페이지 이름 출력
  useEffect(() => {
    const currentRoute = navigation.addListener('state', () => {
      const {name} = navigation.getCurrentRoute();
      setCurrentRouteName(name);
    });

    return currentRoute;
  }, [navigation]);

이렇게 useEffect를 사용해 줘서 naviation을 의존성배열에 넣어주어 구독해 주면서 상태를 업데이트해주면 됩니다.

 

최종 코드

---

// react, react-native
import React, {useEffect, useState} from 'react';
import {StatusBar} from 'react-native';
import {useNavigation} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';

// components
import BottomTabsNavigator from './BottomTabsNavigator';
import Record from '../screens/Record';

// style
import Theme from '../styles/Theme';

const StackNavigator = () => {
  const Stack = createNativeStackNavigator();
  const navigation = useNavigation();
  const [currentRouteName, setCurrentRouteName] = useState('');

  // 현재 페이지 이름 출력
  useEffect(() => {
    const currentRoute = navigation.addListener('state', () => {
      const {name} = navigation.getCurrentRoute();
      setCurrentRouteName(name);
    });

    return currentRoute;
  }, [navigation]);

  return (
    <>
      <StatusBar
        backgroundColor={
          currentRouteName === 'Home' ? Theme.colors.mainLight : '#fff'
        }
        barStyle={'dark-content'}
      />
      <Stack.Navigator>
        <Stack.Screen
          name="Main"
          component={BottomTabsNavigator}
          options={{headerShown: false}}
        />
        <Stack.Screen
          name="Record"
          component={Record}
          options={{headerShown: false}}
        />
      </Stack.Navigator>
    </>
  );
};

export default StackNavigator;