React native 如何使用;createStackNavigator“;及;createMaterialTopTabNavigator“;在一起
在我的react本机应用程序中,我使用的是“createStackNavigator”,但当我结合使用“createMaterialTopTabNavigator”时,会出现错误。如何使用这两种导航?我尝试了aolot,但未能解决此问题。在我的代码中,我使用createStackNavigator两次,一次用于home,另一次用于tabScreen,当我单独使用时,两者都可以很好地工作,但不能组合使用 Main.jsReact native 如何使用;createStackNavigator“;及;createMaterialTopTabNavigator“;在一起,react-native,navigation,react-native-tabnavigator,React Native,Navigation,React Native Tabnavigator,在我的react本机应用程序中,我使用的是“createStackNavigator”,但当我结合使用“createMaterialTopTabNavigator”时,会出现错误。如何使用这两种导航?我尝试了aolot,但未能解决此问题。在我的代码中,我使用createStackNavigator两次,一次用于home,另一次用于tabScreen,当我单独使用时,两者都可以很好地工作,但不能组合使用 Main.js const Home = createStackNavigator(
const Home = createStackNavigator(
{
Profile: Profile,
Feed: Feed,
Chemein: Chemein,
Graph: Graph,
},
{
initialRouteName: 'Profile',
defaultNavigationOptions: {
headerStyle: {
backgroundColor: '#744DD2',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold',
},
},
},
);
const TabScreen = createMaterialTopTabNavigator(
{
Clubs: { screen: Clubs },
Members: { screen: Members },
},
{
tabBarPosition: 'top',
swipeEnabled: true,
tabBarOptions: {
activeTintColor: '#ffff',
inactiveTintColor: '#ccc',
style: {
backgroundColor: '#744DD2',
},
},
}
);
const TopTab = createStackNavigator({
TabScreen: {
screen: TabScreen,
navigationOptions: {
headerStyle: {
backgroundColor: '#744DD2',
},
headerTintColor: '#FFFFFF',
title: 'Clubs',
},
},
});
const container = createAppContainer(Home);
// const container = createAppContainer(TabScreen );
export default container;
我做过这样的事:
const TabNavigator = createBottomTabNavigator(
{
Home: AppStack,
Notification: Notifications,
Account: SettingsScreen,
},
{
defaultNavigationOptions: ({navigation}) => ({
tabBarIcon: ({focused, tintColor}) =>
getTabBarIcon(navigation, focused, tintColor),
}),
tabBarOptions: {
activeTintColor: colors.tealC,
inactiveTintColor: 'gray',
},
},
);
myappstack
是我的堆栈导航器,代码如下:
const AppStack = createStackNavigator(
{
HomeScreen: {
screen: Home,
},
AirportMeeting: {
screen: AirportMeeting,
},
MeetingPoint: {
screen: MeetingPoint,
},
DriverDetails: {
screen: DriverDetails,
},
SightSeeing: {
screen: SightSeeing,
},
HotelDetails: {
screen: HotelDetails,
},
FlightDetails: {
screen: FlightDetails,
},
AddSight: {
screen: AddSight,
},
SightSeeingPurchase: {
screen: SightSeeingPurchase,
},
AddMeals: {
screen: AddMeals,
},
HomeCard: {
screen: HomeCard,
},
Trips: {
screen: Trips,
},
FAQ: {
screen: FAQ,
},
Support: {
screen: Support,
},
BeforeTravel: {
screen: BeforeTravel,
},
Weather: {
screen: Weather,
},
},
{
defaultNavigationOptions: {
headerShown: false,
},
initialRouteName: 'HomeCard',
transitionConfig: () => fromRight(),
},
);
所以基本上在我的tabnavigator主页中,我使用了Appstack,它是一个堆栈导航器
为了防止您好奇,ive alos制作了一个switchnavigator,其中我还添加了tab navigator和其他堆栈Navigtor,因此一切皆有可能:
const navigation = createAppContainer(
createSwitchNavigator(
{
App: TabNavigator,
Auth: AuthStack,
SplashScreen: SplashScreen,
},
{
initialRouteName: 'SplashScreen',
},
),
);
两者都在同一个文件中?问题是关于createMaterialTopTabNavigator的。你能举个例子吗?