React-navigation Navigator 재사용 질문

react-navigation를 사용중입니다.

아래 소스에있는 initialRouteName 값을 동적으로 B로도 주로 A로도 줄수있는 방법이 없을가요?

const aStack = createStackNavigator(
{
A: {
screen: a,
},
B: {
screen: a,
},
},
{
initialRouteName: ‘A’,
}
);

이니셜은 동적으로 주지 마시구요,
이니셜인 A 스크린에 해당하는 컴포넌트 내에서 동적조건식 안에 this.props.navigation.dispatch 나 { NavigationActions } from ‘react-navigation’ 을 사용하시는게 나을듯 합니다.

관련자료

createStackNavigator 내에서 동적 조건식을 어떻식을 사용할 수 있나요?
혹시 샘플소스를 볼 수 없을가요?

   import ScreenA from './screenA'
    
   const aStack = createStackNavigator({
     A: {
       screen: screenA,
     },
     B: {
       screen: screenB,
     },
     {
       initialRouteName: ‘A’,
       navigationOptions: ({ navigation }) => ({
         title: `${navigation.state.params.name}'s Profile'`,
       }),
     }
   );

이런 식으로 createStackNavigator 할 시에 동적으로 하시려면 navigationOptions내에서만 할 수 있는걸로 알고 있습니다.

그러나 동적으로 스크린간 이동을 원하시는것 같은데, 차라리 이런 식으로 하시는게 나아 보입니다. 관련자료

// screenA.js
export default class ScreenA extends Component {

   constructor(props) {
     super(props)
     this.screenSubscriber = props.navigation.addListener('willFocus', payload => {
       if (동적조건식 맞음) {
         this.dynamicScreenMove()
       }
     }
   }

   componentWillUnmount() {
     this.screenSubscriber.remove()
   }

   dynamicScreenMove = () => {
     const { navigation } = this.props
     const params = {
        someParam: 'params',
        someStatus: 'status'
     }
     navigation.navigate({ routeName: 'B', params })
   }

    render() {
        return <View />;
   }
}

한가지 더 react-navigation같은 스크린 스택 구조에서 주의하실 점은 스크린이 스택에 생성되고나면 그대로 컴포넌트가 저장되기때문에 다시 돌아갔을 경우에 componentDidMount, componentWillUnmount등의 생성/소멸관련 리액트 라이프싸이클이 먹지 않습니다. 그래서 this.props.navigation.addListener를 이용하셔서 해당 스크린이 focus/blur되었는지의 여부로 if condition을 짜셔야 합니다.

1 Like