react-native - 在React导航v5中突出显示当前事件抽屉菜单

Question

我已经使用React导航版本:5.X创建了一个自定义的抽屉导航器，
但是当前的事件选项卡未在自定义抽屉菜单中突出显示。

我在DrawerItem元素中添加了“activeTintColor”，但未将其应用于事件项目。

我还在抽屉ContentOptions中添加了activeTintColor。但也没有得到应用。他们有什么办法在自定义抽屉组件中使用此通用选项吗？

我在DrawerItem元素中使用了“icon”，在其中我根据react导航文档添加了默认的props(颜色，焦点，大小)。因此，图标的颜色为“灰色”(可能是默认行为)。如何更改此默认props值？

在“icon”中的默认 Prop “focused”也不起作用。所选标签的图标不会更改。

请找到以下代码图像。如果我有任何错误，请通知我。

导航器代码:



自定义抽屉组件:



当前事件选项卡:主页

Answer 1

您可以使用 DrawerItemList 来显示 Drawer。在 Drawer.Navigator 中定义的屏幕，如下所示:-

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>

那为我解决了这个问题。