3

I have tried many ways, but I have not found a good solution to nest createDrawerNavigator createBottomTabNavigator createStackNavigator

now

  • Drawer (createDrawerNavigator)
    • MainStack(createStackNavigator)
    • TabNav(createBottomTabNavigator)
      • HomeScreen
      • StructureScreen
      • ClassifyScreen
      • ProjectScreen
    • DetailScreen
    • LoginScreen
    • RegisterScreen
    • AboutMeScreen
    • CollectScreen
    • LoginScreen
    • AboutMeScreen
    • CollectScreen

When i open drawer in MainStack, then click AboutMe open AboutMeScreen , at this time is in the AboutMeScreen , but when i open drawer , focus is MainStack - Why focus item is MainStack ? I think should be AboutMe at this time.

here is my code


previous

  • Drawer(createDrawerNavigator)
    • MainStack(createStackNavigator)
    • TabNav(createBottomTabNavigator)
      • HomeScreen
      • StructureScreen
      • ClassifyScreen
      • ProjectScreen
    • DetailScreen
    • LoginStack(createStackNavigator)
    • LoginScreen
    • RegisterScreen
    • AboutMeStack(createStackNavigator)
    • AboutMeScreen
    • CollectStack(createStackNavigator)
    • CollectScreen

In this way , when i open drawer in MainStack , then click AboutMe open AboutMeScreen - AboutMeStack don't have headerLeft to goBack

and , when i open drawer in MainStack , then open LoginScreen , then open RegisterScreen - I don't know how to direct navigate to MainStack .


I don't know which method is right . My English is not very good , and first learn react-native , Thanks

Your Environment

| software | version | ---------------- | ------- | react-navigation | 2.2.0 | react-native | 0.55.4

1
  • Have you found any way to solve this? Currently on version 2.17 and same problem. Oct 9, 2018 at 10:32

1 Answer 1

1

these step will help

i am given my example

step 1: App.js file i have following code (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 i have following code (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;

if anyone face any issue then let me help you

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.