如何选择条件createStackNavigator屏幕？

Question

我正在尝试基于Redux数据选择条件屏幕。我在一个屏幕堆栈中有两个屏幕，该屏幕堆栈也是TabNavigator的一部分（登出的屏幕也应显示“选项卡”）。如果用户已登录，我需要显示CheckScreenLoggedOut，否则显示CheckScreenLoggedOut。我尝试有条件地设置initialRouteName，但仅在登录后才显示CheckScreenLoggedOut。

如何实现此逻辑？

这是我的createStackNavigator部分：

const CheckScreenStack = createStackNavigator(
    {

        CheckSendLoggedOut: {
            screen: IntroScreen,
            navigationOptions: ({navigation}) => ({
                headerLeft: (
                    <View>
                        <TestModeIcon/>
                    </View>
                ),
            }),

        },

        CheckScreen: {
            screen: CheckScreen,
            navigationOptions: ({navigation}) => ({
                headerRight: (
                    <View>
                        <TouchableOpacity title='' onPress={() => { navigation.navigate('NotificationsScreen'); }}>
                            <NotificationTabBarIcon/>
                        </TouchableOpacity>
                    </View>
                )
            }),
        },



    },
    {
        initialRouteName: (typeof store.getState().userData !== "undefined") ? 'CheckScreen' : 'CheckSendLoggedOut'
    }
);

Answer 1

我已经通过使用connect访问redux状态来实现这一点，您可以执行以下操作：

const CheckScreenStack = ({ userData }) => {
   const Stack = createStackNavigator(
     {
       ...
     },
     {
        initialRouteName: (typeof userData !== "undefined") ? 'CheckScreen' : 'CheckSendLoggedOut'
     }
   );
   return Stack;
}

const mapStateToProps = ({ userData }) => {
  return { userData };
};

export default connect(
  mapStateToProps,
  {},
)(CheckScreenStack);