小道具に応じてスタックナビゲータ内の異なる画面を条件付きでレンダリングする方法

Question

小道具、パラメータ、または州に応じて、StackNavigatorで別の画面をレンダリングすることはできますか？

私は以下のようなことを考えていましたが、現時点では、stackNavigatorが画面のパラメータを超えてスコープを持つようにする方法を考えることができません。

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

誰にでもこれについてのアイデアはありますか？ありがとう!!

Answer 1

あなたはそのrenderメソッドの内部で、this.props.navigation.state.params.interestsが存在し、値が含まれているかどうかを確認するためにチェックを行うように、あなたのInterestsScreenコンポーネントにその条件付きレンダリングロジックを転送し、そうでない場合は、としてChooseInterestsScreenの修正版が表示されますモーダル。

Answer 2

代わりに条件付きのコンポーネントをscreenに適用すると、必要なパラメータに従って条件付きでレンダリングするコンテナコンポーネントを持つことができます。

例

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', 
});