💻[React Native] Stack Navigation UI

📌 Header 없애기

DefaultStackNavigator.js

 <Stack.Screen
          name={'BoxOffice'}
          component={BoxOffice}
          options={{headerShown: false}} //기본값: true
        />

📌 Header 맘대로 지정하기

각 페이지 SCREEN 파일에서 setOptions를 통해 지정

MovieDetails.js

  useEffect( //각 title이 바뀔 때마다 렌더링되어야 하므로,,,
    ((effect = () => {
      if (data) { //data가 있으면
        navigation.setOptions({
          title: detail.movieNm,
        });
      }
    }),
    (deps = [data])),
  );

Header가 있다면 SafeAreaView가 자동으로 선택된 상태임!

📌 모든 Screens에 대한 option

screenOptions 활용

DefaultStackNavigator.js

   <Stack.Navigator screenOptions={{headerShown: false}}>
        <Stack.Screen
          name={'BoxOffice'}
          component={BoxOffice}
          options={{headerShown: false}}
        />
        <Stack.Screen name={'MovieDetail'} component={MovieDetail} />
        <Stack.Screen name={'SearchResult'} component={SearchResult} />
      </Stack.Navigator>