如何嵌套createDrawerNavigator createStackNavigator createBottomTabNavigator

Question

我尝试了很多方法，但是我没有找到一个很好的解决方案来嵌套createDrawerNavigator createBottomTabNavigator createStackNavigator

现在

• 抽屉（createDrawerNavigator）
  • MainStack（createStackNavigator）
  • TabNav（createBottomTabNavigator）
    • 主屏幕
    • StructureScreen
    • ClassifyScreen
    • ProjectScreen
  • DetailScreen
  • LoginScreen
  • RegisterScreen
  • AboutMeScreen
  • CollectScreen
  • LoginScreen
  • AboutMeScreen
  • CollectScreen

当我在MainStack中打开抽屉，然后单击AboutMe打开AboutMeScreen，此时在AboutMeScreen中，但是当我打开抽屉时，焦点是 MainStack - 为什么焦点项目是 MainStack ？我认为此时应该 AboutMe 。

here is my code

先前的

• 抽屉（createDrawerNavigator）
  • MainStack（createStackNavigator）
  • TabNav（createBottomTabNavigator）
    • 主屏幕
    • StructureScreen
    • ClassifyScreen
    • ProjectScreen
  • DetailScreen
  • LoginStack（createStackNavigator）
  • LoginScreen
  • RegisterScreen
  • AboutMeStack（createStackNavigator）
  • AboutMeScreen
  • CollectStack（createStackNavigator）
  • CollectScreen

这样，当我在MainStack中打开抽屉时，然后单击AboutMe打开AboutMeScreen - AboutMeStack没有headerLeft去goBack

并且，当我在MainStack中打开抽屉时，然后打开LoginScreen，然后打开RegisterScreen - 我不知道如何直接导航到MainStack。

我不知道哪种方法是对的。 我的英语不是很好，首先学习反应原生，谢谢

您的环境

|软件|版 | ---------------- | ------- |反应导航| 2.2.0 |反应原生的0.55.4

Answer 1

这些步骤会有所帮助

我得到了我的榜样

步骤1：我的App.js文件具有以下代码（createStackNavigator）

import HomeScreen from './src/component/Home/homescreen';
.....

const AuthStack = createStackNavigator({
Home : {
       screen: HomeActivity,
          navigationOptions: {
             header:null        
          }
       },
Profile:  LoginScreen,
Signup: SignupScreen,
});

const AppStack = createStackNavigator(
    {
        HomeScene: HomeScreen,
        ChooseWallet: ChooseWalletScreen,
        ChooseFiatSrn:ChooseFiatScreen,
    });


export default createSwitchNavigator(
{
  App:AppStack,
  Auth:AuthStack,
},
{
  initialRouteName:'Auth',
});

setp 2：homescreen.js我有以下代码（createBottomTabNavigator，createDrawerNavigator）

import Ionicons from 'react-native-vector-icons/Ionicons';
....

const Tab = createBottomTabNavigator({
      Wallet: WalletScreen,
      Request: RequestScreen,
      Send: SendScreen,
      Exchange: ExchangeScreen,
},
{   
    navigationOptions: ({ navigation }) => ({
    tabBarIcon: ({ focused, tintColor }) => {
    const { routeName } = navigation.state;
    let iconName;
    if (routeName === 'Wallet') {
      iconName = `ios-home`;
    } else if (routeName === 'Request') {
      iconName = `ios-options`;
    }else if (routeName === 'Send') {
        iconName = `ios-send`;
    }else if (routeName === 'Exchange') {
        iconName = `ios-swap`;
    }
    // You can return any component that you like here! We usually use an
    // icon component from react-native-vector-icons
    return <Ionicons name={iconName} size={25} color={tintColor} />;
  },
}),
tabBarOptions: {
    activeTintColor: 'steelblue',
    inactiveTintColor: 'gray',  
  },
});

 const DrawerNavigation = createDrawerNavigator({
  Home:{
        screen: Tab,
        //Add can more screen
       }
  });
  export default DrawerNavigation;

如果有人遇到任何问题，请让我帮助您