反应导航使用redux使用自定义组件定义抽屉导航

Question

我正在创建一个React Native应用，其中有一个SwitchNavigator，它将带我进入LoginStack或Drawer（取决于loginState，用户登录后还会登录）抽屉）。

登录用户后，我有一项要求，根据我通过登录名（帐户等）获取的用户详细信息，我从该帐户获取项目。

我的要求是在抽屉导航栏中显示这些项目。 （我有一个屏幕将用于导航，在单击抽屉中的项目实体时显示所选项目的详细信息。再次通过相关API等获取该实体。）我还希望将customComponent注销清空我的状态，以便登录其他帐户/用户不会导致当前正在发生的商店重叠。

因此，我想要一种将Drawer声明连接到redux的方法。

我正在使用redux-thunk作为中间件，下面是相关的代码文件。

AppNavigationView.js

let DrawerNavigation = allProjects => {
    return createDrawerNavigator(
        {
            Dashboard: {
                screen: DashboardStack,
                navigationOptions: ({ navigation }) => {
                    return {
                        drawerIcon: () => <Icon name="chart" fontSize={12} />,
                    };
                },
            },
            Workspaces: {
                screen: ProjectNavigator,
                navigationOptions: {
                    // This is the title that displays in the side Drawer
                    title: 'Workspaces',
                    drawerIcon: () => <Icon name="home" fontSize={12} />,
                },
            },
            MyProfile: {
                screen: MyProfileStack,
                navigationOptions: {
                    title: 'Profile',
                    drawerIcon: () => <Icon name="user" fontSize={12} />,
                },
            },
            About: {
                screen: AboutStack,
                navigationOptions: {
                    drawerIcon: () => <Icon name="info" fontSize={12} />,
                },
            },
        },
        {
            // let allProjectObjects = this.allProjects;
            contentComponent: props => (
                <View style={{ flex: 1 }}>
                    <SafeAreaView forceInset={{ top: 'always', horizontal: 'never' }}>
                        <DrawerItems {...props} />
                        <View
                            style={{ flexDirection: 'row', alignItems: 'center', paddingLeft: 25 }}
                        >
                            <Icon name="info" fontSize={12} />
                            <TouchableOpacity
                                onPress={() => handleLogoutClick(props)}
                                style={{ paddingLeft: 15 }}
                            >
                                <Text style={{ margin: 16, fontWeight: 'bold', color: 'black' }}>
                                    Logout
                                </Text>
                            </TouchableOpacity>
                        </View>
                        // THIS SAFEAREAVIEW IS COMMENTED OUT, BUT I WANT TO DISPLAY MY 
                        // PROJECTS FROM HERE!!
                        {/* <SafeAreaView>
                            <FlatList
                                data={this.allProjects}
                                renderItem={({ item }) => {
                                    return (
                                        <View
                                            style={{
                                                flexDirection: 'row',
                                                alignItems: 'center',
                                                paddingLeft: 25,
                                            }}
                                        >
                                            <Icon name="home" fontSize={12} />
                                            <TouchableOpacity style={{ paddingLeft: 15 }}>                       
                                                <Text
                                                    style={{
                                                        margin: 12,
                                                        color: 'black',
                                                    }}
                                                >
                                                    {item.name}
                                                </Text>
                                            </TouchableOpacity>
                                        </View>
                                    );
                                }}
                                keyExtractor={item => item.id}
                            />
                        </SafeAreaView> */}
                    </SafeAreaView>
                </View>
            ),
            drawerOpenRoute: 'DrawerOpen',
            drawerCloseRoute: 'DrawerClose',
            drawerToggleRoute: 'DrawerToggle',
        },
    );
};

export const createRootSwitchNavigator = (signedOut = false, allProjectObjects = {}) => {
    return createSwitchNavigator(
        {
            SignedIn: {
                screen: DrawerNavigation(allProjectObjects),
            },
            SignedOut: {
                screen: Login,
            },
        },
        {
            initialRouteName: signedOut ? 'SignedOut' : 'SignedIn',
        },
    );
};

AppScreen.js （这称为Switch Navigator）

    render() {
        if (this.state.isLoading || _.isEmpty(this.props.allProjectObjects)) {
            return <SplashScreen />;
        }

        let Layout = createRootSwitchNavigator(
            this.state.isSignedOut,
            this.props.allProjectObjects,
        );
        let AppContainer = createAppContainer(Layout);
        return <AppContainer />;
    }

在这种情况下，我已经连接了redux并通过调度动作来获取项目。

但这只是用户已经登录的情况

如果我们采用登录路径，然后导航到抽屉导航器，我一无所知。

任何帮助都是有意义的。谢谢！