React-navigation

적응기

코드스테이츠

이머시브 15기

김소윤

react-router

react-navigation

vs

다양한 네비게이션 선택지

react-navigation

react-native-navigation

native-navigation

react-native-router-flux
react-router

4종류의 navigation

  1. stack navigator
  2. tab navigator
  3. drawer navigator
  4. switch navigator

createAppContainer

1. stack navigator  A -> B

A

B

B screen

A screen 

A

B

A screen 

1. stack navigator  A -> B -> A

2. tab navigator               

3. drawer navigator

  • main
  • info
  • Q&A

habit

todo

reward

switch는 stack과 어떻게 달라? 

4. switch navigator 

B screen

A screen 

tutorial

const HomeScreen = createAppContainer(createSwitchNavigator(
  {
    AuthLoading,
    Signin,
    drawerNavigator,
  },
  {
    initialRouteName: 'AuthLoading',
  },
));

tutorial

onPress={() => 
this.props.navigation.navigate('AppTabNavigator')}

this.props.navigation.navigate('mainpage', 
{'name' : 'soyoon'})

사이드바

C

D

B

A (로그인)

Switch

C

D

Drawer

사이드바

C

D

B

E

F

G

하단바 E F G

Tab navigator

Stack navigator

navigaton 이동 후 rerender?

willunmount 할 때,

refreshfunction 실행?

  • willFocus 
  • didFocus 
  • willBlur 
  • didBlur 

addListener

 

Subscribe to updates to navigation lifecycle

끝

deck

By SOYOON KIM

Made with Slides.com

deck

  • 168

More from SOYOON KIM