Question

我正在尝试根据Redux数据选择条件屏幕。我在一个屏幕堆栈中有两个屏幕，并且该屏幕堆栈也是TabNavigator的一部分（登出的屏幕也应与“选项卡”一起显示）。如果用户已登录，则需要显示 CheckScreen ，否则显示 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);

如何选择有条件的createStackNavigator屏幕？

1 个答案: