在 React 导航 v5 中突出显示当前活动抽屉菜单

Question

我使用 react 导航版本创建了一个自定义抽屉导航器：5.X，但是当前活动选项卡没有在自定义抽屉菜单中突出显示。

1. 我在 DrawerItem 元素中添加了“activeTintColor”，但它没有应用于活动项目。
2. 我还在 drawerContentOptions 中添加了 activeTintColor。但也没有得到应用。他们有什么方法可以在自定义抽屉组件中使用这个常用选项吗？
3. 我在 DrawerItem 元素中使用了“图标”，根据反应导航文档，我在其中添加了默认道具（颜色、焦点、大小）。因此，图标的颜色为“灰色”（可能是默认行为）。如何更改此默认道具值？
4. “图标”中的默认道具“聚焦”也不起作用。所选选项卡的图标未更改。

请找到下面的代码图像。如果我犯了任何错误，请告诉我。

导航代码：

自定义抽屉组件：

当前活动标签：主页

Answer 1

您可以使用DrawerItemList来显示Drawer.Navigator 中定义的Drawer.Screen，如下所示：-

1) 定义您的抽屉导航器：-

<Drawer.Navigator drawerContentOptions={{ activeBackgroundColor: '#5cbbff', activeTintColor: '#ffffff' }} drawerContent={props => <CustomDrawerContent {...props} />}>
<Drawer.Screen name="Home" component={HomeScreen} options={{
        drawerIcon: config => <Icon
            size={23}
            name={Platform.OS === 'android' ? 'md-list' : 'ios-list'}></Icon>
    }} />

/>

2) 在 CustomDrawerContent 函数中：-

<DrawerContentScrollView {...props} >
----- your custom header ----
<DrawerItemList {...props} />
----- add other custom components, if any ----
</DrawerContentScrollView>

这为我解决了这个问题。