react-native - 如何嵌套createDrawerNavigator createStackNavigator createBottomTabNavigator

Question

尝试了很多方法，都没有找到很好的嵌套createDrawerNavigator createBottomTabNavigator createStackNavigator的方案

现在

• 抽屉(createDrawerNavigator)
  • 主栈(createStackNavigator)
  • TabNav(createBottomTabNavigator)
    • 主屏幕
    • 结构屏幕
    • 分类屏幕
    • 项目屏幕
  • 详细屏幕
  • 登录界面
  • 注册屏幕
  • AboutMeScreen
  • 收集屏幕
  • 登录界面
  • AboutMeScreen
  • 收集屏幕

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

here is my code

---

上一个

• 抽屉(createDrawerNavigator)
  • 主栈(createStackNavigator)
  • TabNav(createBottomTabNavigator)
    • 主屏幕
    • 结构屏幕
    • 分类屏幕
    • 项目屏幕
  • 详细屏幕
  • 登录堆栈(创建堆栈导航器)
  • 登录界面
  • 注册屏幕
  • AboutMeStack(createStackNavigator)
  • AboutMeScreen
  • 收集堆栈(创建堆栈导航器)
  • 收集屏幕

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

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

---

我不知道哪种方法是对的。我的英文不是很好，先学习react-native，谢谢

你的环境

|软件 |版本| -------------- | ------| react 导航 | 2.2.0| react native | 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;

如果有人遇到任何问题，让我来帮助你