[react-navigation] 1

react-navigation

아래와 같이 세가지를 설치한다.

> npm install react-navigation
> expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-
safe-area-context @react-native-community/masked-view
> npm install react-navigation-stack @react-native-community/masked-view

---

기본 함수

기본적인 내비게이션 함수
props.navigation.push('화면이름')
props.navigation.navigate('화면이름')
props.navigation.goBack()
props.navigation.popToTop()

props.navigation.dismiss()
props.navigation.pop()
props.navigation.replace()
props.navigation.reset()
props.navigation.setParams()
props.navigation.getParams()

---

매개변수 전달

push, navigate('indexName', {params}) 두번째 인자로 변수를 전달한다.

---

매개변수 읽기

props.navigation.state.params
props.navigation.getParam('keyName', 'initValue')

만약 키에 해당하는 값이 없다면 initValue 값을 반환한다.

---

매개변수 셋팅

props.navigation.setParams({'key': 'value'})

setParams 는 setState 와 같은 재랜더링을 실행한다.

---

스택 셋팅

import { createAppContainer } from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack'

const RootStack = createStackNavigator(
  {
    Home: HomeScreen,
    Details: DetailsScreen,
  },
  {
    initialRouteName: 'Home',
  }
);
const AppContainer = createAppContainer(RootStack);

---