Navigator 스타일링

 

React Native에서 배경색, 폰트 색상 등의 기본값(default)은 app.json 파일에서 설정할 수 있다.

 

그러나 Stack.Navigator 를 사용하여 라우팅 구조를 만들면 이 기본값이 무시된다.

 

어떻게 수정할 수 있을까?

 

app.json에서 배경색을 설정해주었지만-

Stack.Navigator를 적용하자 app.json의 배경색이 무시된다.

 

 

 

 

 

Stack.Screen 태그의 속성에 주목해보자.

   <Stack.Screen
      name="Profile"  // 이 스크린의 이름
      component={ProfileScreen}	// 표시할 내용
      options={{
        title: "User Profile",	// 화면에 표시될 제목
        headerStyle: { backgroundColor: "#6200EA" },
        headerTintColor: "#FFFFFF",
        contentStyle: { backgroundColor: "#FAFAFA" },
        headerTitleAlign: "center",
        gestureEnabled: true
      }}
    />

 

주석에 표기한 것과 같이, Screen의 대표적인 속성을 알아두면 편리하다.

 

• name : 해당 스크린의 이름. 다른 Screen에서 Navigating 할 때 작성할 좌표.
• component : 표시할 컴포넌트의 내용
• options : 객체 형태로 받는다. 전반적인 디자인 관련 속성을 모아둔 객체.
  • title : 헤더에 표시될 제목
  • headerStyle: 하위 객체에서 헤더의 스타일 결정
  • headerTintColor: 헤더 색. 디폴트는 #007AFF 
  • contentStyle: 스크린의 콘텐츠 영역에 대한 스타일을 하위 객체에서 결정. (전역적이지는 않음)
  • gestureEnabled: 스와이프를 통해 이전 화면으로 돌아가는 기능의 on, off

 

 

그러나 이렇게 스타일링을 하고 다른 스크린으로 넘어가면 이 스타일이 모든 스크린에 적용되지 않은 것을 확인할 수 있다.

이 때는 일일이 복사 + 붙여넣기 하기보다, Stack.Screen을 감싸고 있는 상위 Stack.Navigator에 이 options를 옮겨줄 수 있다.

<Stack.Navigator
  screenOptions={{
    headerStyle: { backgroundColor: "#6200EA" },  // 헤더 스타일
    headerTintColor: "#FFFFFF",  // 헤더 글씨 및 아이콘 색상
    contentStyle: { backgroundColor: "#FAFAFA" },  // 화면 배경 색상
    headerTitleAlign: "center",  // 헤더 제목 정렬
    gestureEnabled: true  // 스와이프 제스처 활성화
  }}
>

  <Stack.Screen 
    name="Profile" 
    component={ProfileScreen} 
    options={{ title: "User Profile" }}  // 특정 화면별 옵션 추가
  />
  
</Stack.Navigator>

 

이렇게 하면 화면을 옮겨다니더라도 스타일이 모두 적용된다.