React Native 정리✍️

참조: [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를 통해 체크할 수 있다.