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 添加到抽屉导航器的路由中。这是您可以添加图标和其他组件（如文本，标签，标题等）并自定义导航抽屉的方式。这是修改后的代码。

    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"
    ..

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

1 个答案: