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

Question

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

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

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

导航代码：

自定义抽屉组件：

当前活动选项卡：首页

Answer 1

@Vishal Tank 在 js 文件中添加你的样式，你的 class 函数就是这样定义的

class Home extends Component 
{
....
static navigationOptions = 
  {
    labelStyle: {
      fontFamily: 'SomeFont',
      color: 'white',
      fontSize:24,
      paddingLeft:8
    },
    drawerLabel: 'Home',
    drawerIcon: ({tintColor}) =>
    (
      <Icon name="home" paddingLeft={8} color={tintColor} width={30}  size={24} style={{color:tintColor}}/>

    )
  };

........

render()
{
return(
...........
);
};
};

这里是link，举个例子 https://reactnavigation.org/docs/drawer-based-navigation/

Answer 2

您可以使用 DrawerItemList 来显示 Drawer.Screen 中定义的 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>

这解决了我的问题。

Answer 3

我使用了自定义焦点，即 const focused = props.state.index;并相应地使用 map 和 style 道具作为 activeTintColor，该元素的 focused 道具仅适用于 DrawerItemList。

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

Highlight Current Active Drawer menu in React navigation v5

react-native

react-native-navigation

react-navigation

react-navigation-drawer

react-navigation-v5