소품에 따라 스택 탐색기에서 다른 화면을 조건부로 렌더링하는 방법

Question

소품, 매개 변수 또는 상태에 따라 StackNavigator에서 다른 화면을 렌더링 할 수 있습니까?

나는 아래와 같은 것을 생각하고 있었지만, 현재로서는 stackNavigator가 화면의 매개 변수에 대해 범위를 갖는 것을 허용하는 방법을 생각할 수 없습니다.

export const MainNavigation = StackNavigator({ 
    Interests: { 
    screen: navigation.state.params.interests ? InterestsScreen : ChooseInterestsScreen, 
    }, 
    Home : { 
    screen: HomeTab, 
    }, 
}, { 
    mode: 'modal', 
    headerMode: 'none', 
}); 

아무도 아이디어가 있습니까? 감사!!

Answer 1

당신은 렌더링 방법 내부 this.props.navigation.state.params.interests이 존재하고 값이 포함되어 있는지 확인하기 위해 검사를 수행하도록, 당신의 InterestsScreen 구성 요소에 그 조건 렌더링 논리를 전송하고 그렇지 않은 경우, A와 ChooseInterestsScreen의 수정 된 버전을 표시해야 모달.

Answer 2

그런 다음 조건부 구성 요소를 화면에 표시하려면 컨테이너 매개 변수를 사용하여 원하는 매개 변수에 따라 조건부로 렌더링 할 수 있습니다.

예

const InterestsContainer = (props) => { 
    return (props.navigation.state.params.interests ? InterestsScreen : ChooseInterestsScreen); 
} 

export const MainNavigation = StackNavigator({ 
    Interests: { 
    screen: InterestsContainer, 
    }, 
    Home : { 
    screen: HomeTab, 
    }, 
}, { 
    mode: 'modal', 
    headerMode: 'none', 
});