反应本机堆栈,抽屉,选项卡,堆栈导航顺序

时间:2017-10-07 23:55:32

标签: react-native react-redux react-navigation

这是我用于主导航器的代码。

export const MainNavigations = StackNavigator({
    Auth: {
        screen: AuthNavigation
    },
    Main: {
        screen: DrawerNavigations
    }
}, {
        initialRouteName: 'Auth',
        headerMode: 'none'
    });

AuthNavigation没有问题。

这是我的抽屉导航器

const DrawerRoutes = {
    AppHome: {
        screen: TabNavigations,
        navigationOptions: {
            drawerLabel: 'Home',
            drawerIcon: ({ tintColor }) => <Icon size={20} color="#bdc3c7" name="home" />
        }
    },
    UserSettings: {
        screen: UserSettingsStack,
        navigationOptions: {
            drawerLabel: 'Preferences',
            drawerIcon: ({ tintColor }) => <Icon size={20} color="#bdc3c7" name="gear" />
        }
    },
    Logout: {
        screen: Logout,
        navigationOptions: {
            drawerLabel: 'Logout',
            drawerIcon: ({ tintColor }) => <Icon size={20} color="#bdc3c7" name="sign-out" />
        }
    }
};

export const DrawerNavigations = DrawerNavigator(DrawerRoutes, {
    initalRouteName: 'AppHome',
    contentComponent: (props) => <DrawerContent {...props} />,
    mode: Platform.OS === 'ios' ? 'modal' : 'card'
});

这是我的Tab Navigator

export const TabNavigations = TabNavigator({
    HomeTab: {
        screen: HomeStack,
        navigationOptions: {
            tabBarLabel: 'Home',
        }
    },
    CirclesTab: {
        screen: CirclesStack,
        navigationOptions: {
            tabBarLabel: "Circles"
        }
    }
}, {
        initialRouteName: "HomeTab",
        swipeEnabled: false,
        animationEnabled: true,
        tabBarComponent: NavigationComponent,
        tabBarPosition: 'bottom',
        tabBarOptions: {
            bottomNavigationOptions: {
                style: {
                    borderTopWidth: 0.2,
                    borderTopColor: 'rgba(0, 0, 0, 0.2)'
                },
                backgroundColor: '#FFF',
                activeLabelColor: '#3498db',
                tabs: {
                    HomeTab: {
                        icon: <Icon size={24} color="#bdc3c7" name="home" />,
                        activeIcon: <Icon size={24} color="#3498db" name="home" />
                    },
                    CirclesTab: {
                        icon: <Icon size={24} color="#bdc3c7" name="circle-o" />,
                        activeIcon: <Icon size={24} color="#3498db" name="circle-o" />
                    }
                }
            }
        }
    });

这个问题是,当我导航到主导航器时,Tab会自动刷到CirclesStack屏幕。 如果你明白我的意思,请帮忙。

这就是我执行导航的方式:

const firstAction = NavigationActions.reset({
    index: 0,
    key: null,
    actions: [
        NavigationActions.navigate({
            routeName: 'Main'
        }),
    ],
});

const initialNavState = MainNavigations.router.getStateForAction(firstAction);

这是我的Circle Stack:

const CirclesStack = StackNavigator({
    Circles: {
        screen: Circles,
        navigationOptions: ({ navigation }) => ({
            title: 'Circles',
            headerLeft: <DrawerIcon navigate={navigation.navigate} />,
            headerTintColor: colors.primaryBackground,
            headerTitleStyle: defaultStyles.tabText,
            headerStyle: defaultStyles.tabContainer
        })
    },
    AddCircle: {
        screen: AddCircle,
        navigationOptions: {
            title: 'Add Circle',
            headerTintColor: colors.primaryBackground,
            headerTitleStyle: defaultStyles.tabText,
            headerStyle: defaultStyles.tabContainer
        }
    },
    SingleCircle: {
        screen: SingleCircle,
        navigationOptions: {
            headerTintColor: colors.primaryBackground,
            headerTitleStyle: defaultStyles.tabText,
            headerStyle: defaultStyles.tabContainer
        }
    },
    EditCircle: {
        screen: EditCircle,
        navigationOptions: {
            title: 'Edit Circle',
            headerTintColor: colors.primaryBackground,
            headerTitleStyle: defaultStyles.tabText,
            headerStyle: defaultStyles.tabContainer
        }
    },
    SingleEvent: {
        screen: SingleEvent,
        path: 'event/:id',
        navigationOptions: {
            headerTintColor: colors.primaryBackground,
            headerTitleStyle: defaultStyles.tabText,
            headerStyle: defaultStyles.tabContainer
        }
    },
    AddEvent: {
        screen: AddEvent,
        navigationOptions: {
            title: 'Add Event',
            headerTintColor: colors.primaryBackground,
            headerTitleStyle: defaultStyles.tabText,
            headerStyle: defaultStyles.tabContainer
        }
    },
    EditEvent: {
        screen: EditEvent,
        navigationOptions: {
            title: 'Edit Event',
            headerTintColor: colors.primaryBackground,
            headerTitleStyle: defaultStyles.tabText,
            headerStyle: defaultStyles.tabContainer
        }
    }
});

0 个答案:

没有答案