如何在React Native中使用StackNavigator

Question

我正在尝试使我的本机应用程序使用stackNavigator，因此当人们按下android手机上的后退按钮时，它将转到主屏幕。

我希望bottomNavigator中的所有屏幕在第一次单击“后退”按钮时都返回到主屏幕。我还创建了一个新屏幕（TravelCPHAirportScreen），该屏幕不应该包含在bottomNavigationbar中，现在当我导航至该屏幕时，由于后退按钮退出了应用程序，因此无法再次返回。

我已经尝试了几件事，但无法真正弄清楚是否正确放置了新的TravelCPHAirportScreen以及如何按照所述方法制作stackNavigator。

import React, {Component} from 'react';
import { createStackNavigator, createBottomTabNavigator } from 'react-navigation';
import { Ionicons } from '@expo/vector-icons';

import AuthScreen from './AuthScreen';

import HomeScreen from './HomeScreen';
import MeetingScreen from './MeetingScreen';
import TripScreen from './TripScreen';
import RateTripScreen from './RateTripScreen';
import ProfileScreen from './ProfileScreen';

import TravelCPHAirportScreen from './TravelCPHAirportScreen';

let AuthStack = createStackNavigator({ AuthScreen }, {
    headerMode: 'none',
    navigationOptions: {
        headerStyle: {
            backgroundColor: '#202020',
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
            fontWeight: 'bold',
        },
    },
});

AuthStack.navigationOptions = {
    tabBarLabel: 'Login',
    tabBarVisible: false,
};


let HomeStack = createStackNavigator({ HomeScreen }, {
    title: 'Home  ',
    titleStyle: {
      color: '#f0ca6d',
      fontWeight: '300',
      justifyContent: 'space-between',
    },
    navigationOptions: {
        headerStyle: {
            backgroundColor: '#303030',
        },
        headerTintColor: '#f0ca6d',
        headerTitleStyle: {
            fontWeight: 'bold',
        },
    },
});

HomeStack.navigationOptions = {
    tabBarLabel: 'Home',
    tabBarVisible: true,
};

let MeetingStack = createStackNavigator({ MeetingScreen }, {
    navigationOptions: {
        title: 'Meeting',
        titleStyle: {
          color: '#f0ca6d',
          fontWeight: '300',
          justifyContent: 'space-between',
          textAlign: 'center'
        },
        headerStyle: {
            backgroundColor: '#303030',
        },
        headerTintColor: '#f0ca6d',
        headerTitleStyle: {
            fontWeight: 'bold',
        },
    },
});

MeetingStack.navigationOptions = {
    tabBarLabel: 'Meeting Point',
    tabBarVisible: true,
};

let TripStack = createStackNavigator({ TripScreen }, {
    navigationOptions: {
        title: 'Trip',
        titleStyle: {
          color: '#f0ca6d',
          fontWeight: '300',
          justifyContent: 'space-between'
        },
        headerStyle: {
            backgroundColor: '#303030',
        },
        headerTintColor: '#f0ca6d',
        headerTitleStyle: {
            fontWeight: 'bold',
        },
    },
});

TripStack.navigationOptions = {
    tabBarLabel: 'Trip',
    tabBarVisible: true,
};


let RateStack = createStackNavigator({ RateTripScreen }, {
    navigationOptions: {
        title: 'Rate Trip',
        titleStyle: {
          color: '#f0ca6d',
          fontWeight: '300',
          justifyContent: 'space-between'
        },
        headerStyle: {
            backgroundColor: '#303030',
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
            fontWeight: 'bold',
        },
    },
});

RateStack.navigationOptions = {
    tabBarLabel: 'Rate Trip',
    tabBarVisible: true,
};


let ProfileStack = createStackNavigator({ ProfileScreen }, {
    navigationOptions: {
        title: 'Profile',
        titleStyle: {
          color: '#f0ca6d',
          fontWeight: '300',
          justifyContent: 'space-between',
          textAlign: 'center'
        },
        headerStyle: {
            backgroundColor: '#303030',
        },
        headerTintColor: '#f0ca6d',
        headerTitleStyle: {
            fontWeight: 'bold',
        },
    },
});

ProfileStack.navigationOptions = {
    tabBarLabel: 'Profile',
    tabBarVisible: true,
};



let TravelCPHAirportStack = createStackNavigator({ TravelCPHAirportScreen }, { headerMode: 'none',
    navigationOptions: {
        headerStyle: {
            backgroundColor: '#202020',
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
            fontWeight: 'bold',
        },
    },
});

TravelCPHAirportStack.navigationOptions = {
    tabBarLabel: 'CPH Airport',
    tabBarVisible: false,
};



let MainTab = createBottomTabNavigator(
    {
        HomeStack,
        MeetingStack,
        TripStack,
        RateStack,
        ProfileStack,
    },
    {
        navigationOptions: ({ navigation }) => ({
            tabBarIcon: ({ focused, tintColor }) => {

                const { routeName } = navigation.state;

                let iconName;

                switch (routeName) {
                  case 'HomeStack':
                      // const iconName = Platform.OS === 'android' ? 'android-icon': 'ios-icon';
                      iconName = `ios-home${focused ? '' : '-outline'}`;
                      break;
                  case 'MeetingStack':
                      iconName = `ios-git-network${focused ? '' : '-outline'}`;
                      break;
                  case 'TripStack':
                      iconName = `ios-map${focused ? '' : '-outline'}`;
                      break;
                  case 'RateStack':
                      // const iconName = Platform.OS === 'android' ? 'android-icon': 'ios-icon';
                      iconName = `ios-star${focused ? '' : '-outline'}`;
                      break;
                  case 'ProfileStack':
                      // const iconName = Platform.OS === 'android' ? 'android-icon': 'ios-icon';
                      iconName = `ios-person${focused ? '' : '-outline'}`;
                      break;
                }

                return <Ionicons name={iconName} size={30} color={tintColor} />;

            },
        }),
        headerMode: 'none',
        tabBarOptions: {
            style: {
              backgroundColor: '#202020'
            },
            activeTintColor: '#f0ca6d',
            inactiveTintColor: 'white',
            labelStyle: { fontSize: 12 }
        },
        tabBarPosition: 'bottom'
    }
);

MainTab.navigationOptions = {
    tabBarLabel: 'Main',
    tabBarVisible: false,
};

let RootTab = createBottomTabNavigator(
    {
        AuthStack,
        MainTab,
    },{
        navigationOptions: ({ navigation }) => ({
            tabBarIcon: ({ focused, tintColor }) => {

                const { routeName } = navigation.state;
                let iconName;

                switch (routeName) {
                    case 'AuthStack':
                        iconName = `ios-log-in${focused ? '' : '-outline'}`;
                        break;
                }
                return <Ionicons name={iconName} size={30} color={tintColor} />;
            },
        }),
        headerMode: 'none',
        tabBarOptions: {
            activeTintColor: 'tomato',
            inactiveTintColor: 'gray',
            labelStyle: { fontSize: 12 }
        },
        tabBarPosition: 'bottom'
    }
);

const Root = createStackNavigator(
    {
        root: RootTab,
    },
    { headerMode: 'none', }
);

class Navigation extends Component {
    render() {
        return (
           <Root/>
        );
    }
}
export default Navigation;