如何在抽屉导航器项目中添加图标，这些项目具有反应原生的堆栈导航

Question

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

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

Answer 1

您必须将navigationOptions添加到drawerNavigator的路由中。这就是您可以添加图标和其他组件（如文本，标签，标题等）以及自定义导航抽屉的方式。这是你修改过的代码：

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

下面是代码，在navigationOptions中添加有关如何向导航抽屉添加自定义文本的内容：

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

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

    ..
    title:"My Home"
    ..