如何将图标添加到具有堆栈导航的抽屉导航器项目中反应原生答案

【问题标题】：how can i add icons to drawer navigator items that have stack navigation in react native如何将图标添加到具有堆栈导航的抽屉导航器项目中反应原生
【发布时间】：2019-03-30 13:17:52
【问题描述】：

我想将图标添加到具有单独堆栈导航屏幕的抽屉项目。当我尝试将抽屉图标添加到主屏幕内的导航选项时，没有任何显示。这是我的代码的 sn-p

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

然后是我的抽屉导航

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

【问题讨论】：

标签： react-native react-navigation

【解决方案1】：

您必须将 navigationOptions 添加到您的抽屉导航器的路线中。这是您可以添加图标和其他组件（如文本、标签、标题等）并自定义导航抽屉的方式。这是您修改后的代码。：

    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,
     })

下面是代码，将其添加到导航选项中，了解如何将自定义文本添加到导航抽屉：

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

同样，您可以为标题指定标题，您希望在抽屉导航器中选择相应选项时更改标题标题。

    ..
    title:"My Home"
    ..

【讨论】：