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

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

标签： react-nativereact-navigation

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);