[React-Native] Stack | 여러 화면에 공통 Style 적용

- 모든 화면에서의 Header Bar 스타일을 동일하게 설정하고 싶다면?

- 위에서는 style을 <Stack.Screen>에 지정해줬다.

  -> <Stack.Navigator>로 옮기기

 

 

• 'screenOptions' property를 통해 style을 주면 모든 스크린에 공통으로 style을 적용시킬 수 있다.

<Stack.Navigator 
          initialRouteName="Homes"
            screenOptions={{
              headerStyle: {
                backgroundColor: '#아무거나'
              },
              headerTintColor: '#아무거나',
              headerTitleStyle: {
                fontWeight: '아무거나',
                color: '#아무거나'
              }
            }}
>

  - 다른 점은 <Stack.Screen>에서는 options라는 property안에 스타일을 주었지만

  여기서는 screenOptions이라는 property를 설정한다.

 

  - Home Screen과 User Screen의 Header Bar가 공통으로 변경되었다.

 

 

 

 

---

 

• 여러 개의 스크린들 중 단 하나의 스크린만 Header Bar를 다른 스타일로 지정하고싶다면?

-> 그 다른 스크린의 <Stack.Screen>에 원하는 스타일을 적용해라

 

 

- 기존의 <Stack.Screen>의 options들을 주석해지하기

 

- <Stack.Navigator> 태그 안에 여러 screen에서 공통으로 사용하는 style을 지정해도,

  그 하위 태그인 <Stack.Screen> 안에 지정한 옵션이 다 덮어버린다.

-> 공통으로 option을 지정해도 각 스크린별로 수정이 가능하구나 !

 

 

---

신기하닷 <Stack.Screen>의 조건이 우선적으로 적용하는 걸 염두해두기 !