[ReactNative_study_4]Stack Navigator

1) Stack Navigator 종류

- Native stack navigator - nativa API 를 사용한다. 

  (IOS - uinAVIGATIONcONTROLLER / Android - Fragment )

  약간의 커스텀이 제한된다. 그러나 Native를 사용하므로 성능이 좋음

 

- stack Navigator - React Navigation 에서 안드로이드 / IOS Look & feel 을 살리기 위하여 JavaScript로 만들어 것

 커스텀에 자유도가 높음 그러나 성능이 좀 떨어질 수 있음

 

2) Navigation props의 종류 (https://reactnavigation.org/docs/navigation-prop)

• navigation
  • navigate - go to another screen, figures out the action it needs to take to do it
  • reset - wipe the navigator state and replace it with a new route
  • goBack - close active screen and move back in the stack
  • setParams - make changes to route's params
  • dispatch - send an action object to update the navigation state
  • setOptions - update the screen's options
  • isFocused - check whether the screen is focused
  • addListener - subscribe to updates to events from the navigator

여러 종류의 props가 존재한다. 여기서 setOptions는 options을 변경해 주는 props로 아래의 screenOptions / options로 동일한 내용을 갖는다.  (https://reactnavigation.org/docs/native-stack-navigator)

const Screen= ({navigation:{setOptions}})=> {return(
          <TouchableOpacity onPress={()=>{setOptions({title:"hello"})}}>
              <Text>Screen</Text>
          </TouchableOpacity>)}


// 여기서 <NvativStack.Navigator screenOptions={{}}/>는

// defalut로 모든 screen에 사용되며

// <NativeStack.Screen options={{}}/>는 각각의 screen에 적용되는 option이다.

 

* animation /presentation 같은 options도 있음. ios / android 기기에 따라 지원되는 옵션이 다르므로 확인을 해봐야한다.

screenOptions={{animation:"slide_from_left"}}