Stack Navigator

Stack Navigator

종류

• Native stack navigator - native API를 사용한다.
  약간의 커스텀에 제한되나, Native를 사용하므로 성능이 좋다
  
• stack Navigator - React Navigation 에서 안드로이드 / IOS 화면 느낌을 살리기 위하여 JavaScript로 만들어 진 것 커스텀에 자유도가 높으나 성능이 좀 떨어질 수 있음

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 navigators

여러 종류의 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>)}
                                              
 // 여기서 <NativeStack.Navigator screenOptions={{}}/>는

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

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

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

screenOptions={{animation:"slide_from_left"}}