这是我用于主导航器的代码。
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
}
}
});