참조: [https://reactnavigation.org/docs/en/navigation-prop.html#docsNav]

사용, 존재 이유

  • web에서 url은 stack구조로 처리되며, push하거나, pop해서 다른 페이지로 이동하거나 뒤로 간다.
  • 그러나 mobile 환경에는 이러한 stack구조의 네비게이터가 존재하지 않는다.
  • 👉react-navigation은 react-native에 글로벌 stack 네비게이터를 제공해주고, 관리한다.

this.props.navigation

  • route 설정할 때 연결된 screen 에는 자동으로 navigation props가 전달된다. (react-router-v4랑 비슷하다..)
  • 직접적으로 route로 설정되어 있지 않을 경우 react-navigation이 제공해주는 HOC로 컴포넌트를 인자로 호출해서 주입해줘야 한다.
import { withNavigation } from 'react-navigation';
class SubComp extends React.Component {}

export default withNavigation(SubComp); // SubComp로 navigation props를 주입해줌!🔥
  • navigation props 구성
    • navigate: 다른 screen을 최상위 스택으로 올려주는것 같다. (리다이렉트??)
    • goBack: 현재 화면을 닫고 직전 스택으로 이동하나보다.
    • addListener: navigation이 변경될 때 이벤트 바인딩 할 수 있나보다!
    • isFocuesd: 현재 screen이 focused 되어있는지?
      기타 등등..
    • 오리지날
      navigate - go to another screen, figures out the action it needs to take to do it
      goBack - close active screen and move back in the stack
      addListener - subscribe to updates to navigation lifecycle
      isFocused - function that returns true if the screen is focused and false otherwise.
      state - current state/routes
      setParams - make changes to route's params
      getParam - get a specific param with fallback
      dispatch - send an action to router
      dangerouslyGetParent - function that returns the parent navigator, if any

navigate가 동작하지 않는 경우

  1. navigate('RouteName'); 로 다른 stack으로 이동할 때 Stack Navigator에 정의되지 않을 경우 아무일도 일어나지 않는다.
    • If we call this.props.navigation.navigate with a route name that we haven't defined on a stack navigator, nothing will happen. Said another way, we can only navigate to routes that have been defined on our stack navigator — we cannot navigate to an arbitrary component.
    • navigate는 현재 stack에 이동하려하는 routeName이 존재하는지 체크하고 없을 경우에만 stack에 routeName을 추가한다면, push는 체크하지 않고, 바로 추가 한다.
  2. 이미 해당 stack에 위치할 경우 동작하지 않는다.

Stack Navigator

  • 웹 브라우저와 같이 Stack 구조로 페이지를 관리하는 네비게이터.
  • react-native에서 Stack Navigator 생성 방법은 👇
// Other code for HomeScreen here...

class DetailsScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
        <Text>Details Screen</Text>
      </View>
    );
  }
}

const AppNavigator = createStackNavigator( // 👈 react-navigation이 제공해주는 api
  { // 첫 번째 인자로 route 경로를 설정. 
    Home: HomeScreen, // Route Name: Route Component (Route Name은 크게 작명 규칙 없지만 react-navigation에서는 파스칼표기법을 추천한다.
    Details: DetailsScreen
  },
  { // 두 번째 인자로 Stack Navigator에 대한 Option을 설정할 수 있다.
    initialRouteName: "Home"
  }
);

/* 👇route name관련 react-navigation측 주장.
The casing of the route name doesn't matter -- you can use lowercase home or capitalized Home, it's up to you. We prefer capitalizing our route names.
*/
  • react에서 네비게이터에 의해 리다이렉트 됬을떄는 A -> B route로 이동할 경우 A는 Unmount되고 B가 Mount됬다면, react-navigation은 A는 Unmount되지 않고, 처음 A가 Mount되고, B로 이동 시 B도 Mount된다!
  • react-navigation을 사용했을 때 A -> B -> A 를 체크할려면 제공해주는 willFocus, willBlur, didFocus and didBlur 와 같은 api를 통해 체크할 수 있다.