我如何向在本机中具有堆栈导航的抽屉式导航器项目添加图标

Question

i want to add icons to drawer items which have separate stack navigation screens. When i try to add drawer Icons to navigation options inside of the main screen, nothing show. Here's a snippet of my code

const HomeScreenNav = createStackNavigator({
  main: {screen: Main },
  providers: { screen: Providers},
  providerProfile: { screen: ProviderProfile},
}, {
  initialRouteName: 'main',
})

Then my drawer navigation

const AppDrawerNavigation = createDrawerNavigator({
   home: { screen: HomeScreenNav },
   appointments: {screen: Appointments}
}, {
   initialRouteName: 'home',
   drawerBackgroundColor: '#fff7fc',
   contentComponent: drawerComponent,
})

Answer 1

You have to add navigationOptions to the routes of your drawerNavigator. This is how you one can add icons and other components like text, label, title etc and customize your navigation drawer. Here's your modified code.:

    const AppDrawerNavigation = createDrawerNavigator({
         home: { screen: HomeScreenNav,
                 navigationOptions: {
                 drawerIcon: (
                      <Icon name={$YourIconName} size={24}
                          ..
                          //you can also add color and other Icon props here                        
                      />
                    ),
                  },
                },
         appointments: {screen: Appointments,
                         navigationOptions: {
                         drawerIcon: (
                              <Icon name={$YourIconName} size={24}
                                  ..
                               //you can also add color and other Icon props here                        
                              />
                           ),
                         }, 
                       }
     }, {
         initialRouteName: 'home',
         drawerBackgroundColor: '#fff7fc',
         contentComponent: drawerComponent,
     })

Below is the code, add it inside navigationOptions on how you can add customized text to your navigation drawer:

    ..
    drawer: {
            label: () => <Text>My Home</Text>
          },
    ..

Similarly, you can specify title to your header, where you wish to change the header title on selecting corresponding option in your drawer navigator.

    ..
    title:"My Home"
    ..