有没有办法使用React Navigation创建不包含在BottomTabNavigator中的导航？

Question

我目前正在使用React Native开发一个项目，我有关于创建导航的问题，我不会允许导航将插入BottomTabNavigator。 我有模块，当我按下设置我的屏幕将转到ProfileScreen。

问题：如何导航未包含在BottomTabNavigator中的屏幕？

导入文件：

import React, {Component} from 'react';
import {Platform, StyleSheet, View, YellowBox, Dimensions, AppRegistry, Image, TouchableOpacity, AsyncStorage,} from 'react-native';
import axios from 'axios';
import {Container, Header, Title, Content, Footer, FooterTab, Button, Left, Right, Body, Icon, Text, Item, Input,Toast} from 'native-base';
import {
  createSwitchNavigator,
  createAppContainer,
  createStackNavigator,
  createDrawerNavigator,
  createBottomTabNavigator
} 
  from 'react-navigation';

 import Fa5Icons from 'react-native-vector-icons/FontAwesome5';
 import Mat5Icons from 'react-native-vector-icons/MaterialCommunityIcons';
 import MaterialIcons from 'react-native-vector-icons/MaterialIcons';

import AuthLoadingScreen from './Screens/AuthLoadingScreen';
import SignInScreen from './Screens/SignInScreen';
import DriverSettingScreen from './Screens/DriverSettingScreen';
import DriverHistoryScreen from './Screens/DriverHistoryScreen';
import DriverDashScreen from './Screens/DriverDashScreen';
import DriverNotificationScreen from './Screens/DriverNotificationScreen';
import DriverAssignOrderScreen from './Screens/DriverAssignOrderScreen';
import DriverProfileScreen from './Screens/DriverProfileScreen';

导航：

    const AuthStackNavigator = createStackNavigator({ 
  SignIn: SignInScreen,
});

let that = this;

const AppTabNavigator = createBottomTabNavigator({
  DriverDashScreen: {
    screen:DriverDashScreen,

    navigationOptions: ({ navigation }) => ({
      tabBarLabel:"Home",
      tabBarIcon: ({ focused, tintColor }) => {
          const { routeName } = navigation.state;
          if (routeName === 'DriverDashScreen') {
              return <Fa5Icons name='compass' size={22} color={tintColor} />
          } 
          else
          {
            return <Fa5Icons name='compass' size={22}  style={{color:'black'}}/>
          }
      },
      tabBarOptions: {
        activeTintColor: '#008E9B',
        inactiveTintColor: 'grey',
        showIcon: true,
        labelStyle: {
          fontWeight: 'bold',
        },
      },
    })
  },
  DriverAssignOrderScreen: {
    screen:DriverAssignOrderScreen,

    navigationOptions: ({ navigation }) => ({
      tabBarLabel:"Orders",
      tabBarIcon: ({ focused, tintColor }) => {
          const { routeName } = navigation.state;
          if (routeName === 'DriverAssignOrderScreen') {
              return <Mat5Icons name='food' size={27} color={tintColor} />
          } 
          else
          {
            return <Mat5Icons name='food' size={27}  style={{color:'black'}} />
          }
      },
      tabStyle: { justifyContent: 'center', alignItems: 'center', paddingVertical: 5 },
      tabBarOptions: {
        activeTintColor: '#008E9B',
        inactiveTintColor: 'grey',
        showIcon: true,
        labelStyle: {
          fontWeight: 'bold',
        },
      },
    })
  },
  DriverHistoryScreen: {
    screen:DriverHistoryScreen,
    navigationOptions: ({ navigation }) => ({
      tabBarLabel:"History",
      tabBarIcon: ({ focused, tintColor }) => {
          const { routeName } = navigation.state;
          if (routeName === 'DriverHistoryScreen') {
              return <Fa5Icons name='history' size={19} color={tintColor} />
          } 
      },
      tabBarOptions: {
        activeTintColor: '#008E9B',
        inactiveTintColor: 'grey',
        showIcon: true,
        labelStyle: {
          fontWeight: 'bold',
        },
      },
    })
  },
  DriverNotificationScreen: {
    screen:DriverNotificationScreen,
    navigationOptions: ({ navigation }) => ({
      tabBarLabel:"Notification",
      tabBarIcon: ({ focused, tintColor }) => {
          const { routeName } = navigation.state;
          if (routeName === 'DriverNotificationScreen') {
              return <MaterialIcons name='notifications-active' size={22} color={tintColor} />
          } 
      },
      tabBarOptions: {
        activeTintColor: '#008E9B',
        inactiveTintColor: 'grey',
        showIcon: true,
        labelStyle: {
          fontWeight: 'bold',
        },
      },
    })
  },
  DriverSettingScreen: {
    screen:DriverSettingScreen,
    navigationOptions: ({ navigation }) => ({
      tabBarLabel:"Account",
      tabBarIcon: ({ focused, tintColor }) => {
          const { routeName } = navigation.state;
          if (routeName === 'DriverSettingScreen') {
              return <MaterialIcons name='account-circle' size={22} color={tintColor} />
          }
          else
          {
            return <MaterialIcons name='account-circle' size={22} style={{color:'black'}} />
          } 
      },
      tabBarOptions: {
        activeTintColor: '#008E9B',
        inactiveTintColor: 'grey',
        showIcon: true,
        labelStyle: {
          fontWeight: 'bold',
        },
      },
    })

  },
})
const AppStackNavigator = createStackNavigator({ 
    AppTabNavigator: {
      screen:AppTabNavigator
    }
},{
  header: null,
  headerMode: 'none'
});
const AppDrawerNavigator = createDrawerNavigator({
  Home:AppStackNavigator,
})

export default createAppContainer(createSwitchNavigator({
  AuthLoading: AuthLoadingScreen,
  Auth:AuthStackNavigator,
  App: AppDrawerNavigator,
},
{
  initialRouteName: 'AuthLoading',

}
))

我的动作按钮：

<ListItem icon onPress={() => navigate('DriverProfileScreen')}>
        <Left>
        <Button style={{ backgroundColor: "#FF9501", width:25, height:25}}>
            <Icon type="MaterialIcons" name="settings"  style={{fontSize:16}}/>
        </Button>
        </Left>
        <Body>
        <Text style={{fontSize:14}}>Settings</Text>
        </Body>
        <Right>
            <Icon name="arrow-forward" />
        </Right>
</ListItem>

Answer 1

导入文件：

import React, {Component} from 'react';
import {Platform, StyleSheet, View, YellowBox, Dimensions, AppRegistry, 
Image, TouchableOpacity, AsyncStorage,} from 'react-native';
import axios from 'axios';
import {Container, Header, Title, Content, Footer, FooterTab, Button, Left, Right, Body, Icon, Text, Item, Input,Toast} from 'native-base';
import {
createSwitchNavigator,
createAppContainer,
createStackNavigator,
createDrawerNavigator,
} 
from 'react-navigation';

import Fa5Icons from 'react-native-vector-icons/FontAwesome5';
import Mat5Icons from 'react-native-vector-icons/MaterialCommunityIcons';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';

import AuthLoadingScreen from './Screens/AuthLoadingScreen';
import SignInScreen from './Screens/SignInScreen';
import DriverSettingScreen from './Screens/DriverSettingScreen';
import DriverHistoryScreen from './Screens/DriverHistoryScreen';
import DriverDashScreen from './Screens/DriverDashScreen';
import DriverNotificationScreen from './Screens/DriverNotificationScreen';
import DriverAssignOrderScreen from './Screens/DriverAssignOrderScreen';
import DriverProfileScreen from './Screens/DriverProfileScreen';

导航：

 const AuthStackNavigator = createStackNavigator({
 SignIn: SignInScreen,
 });

let that = this;
const stackNav = createStackNavigator({
DriverDashScreen: {
screen: DriverDashScreen,

navigationOptions: ({ navigation }) => ({

})
},
DriverAssignOrderScreen: {
screen: DriverAssignOrderScreen,

navigationOptions: ({ navigation }) => ({

})
},
DriverHistoryScreen: {
screen: DriverHistoryScreen,
navigationOptions: ({ navigation }) => ({

})
},
DriverNotificationScreen: {
 screen: DriverNotificationScreen,
navigationOptions: ({ navigation }) => ({

})
},
DriverSettingScreen: {
screen: DriverSettingScreen,
navigationOptions: ({ navigation }) => ({


  })
 },
})
 const AppDrawerNavigator = createDrawerNavigator({
 Home:stackNav,
})

export default createAppContainer(createSwitchNavigator({
AuthLoading: AuthLoadingScreen,
Auth:AuthStackNavigator,
App: AppDrawerNavigator,
},
{
initialRouteName: 'AuthLoading',

}
))

我的动作按钮：

    <ListItem icon onPress={() => 
    this.props.navigation.navigate('DriverSettingScreen')}>
    <Left>
    <Button style={{ backgroundColor: "#FF9501", width:25, height:25}}>
        <Icon type="MaterialIcons" name="settings"  style={{fontSize:16}}/>
    </Button>
    </Left>
    <Body>
    <Text style={{fontSize:14}}>Settings</Text>
    </Body>
    <Right>
        <Icon name="arrow-forward" />
    </Right>
    </ListItem>