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

【问题标题】：Highlight Current Active Drawer menu in React navigation v5在 React 导航 v5 中突出显示当前活动抽屉菜单
【发布时间】：2020-06-22 15:47:16
【问题描述】：

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

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

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

导航代码：

自定义抽屉组件：

当前活动标签：主页

【问题讨论】：

请在此处查看答案：stackoverflow.com/questions/59005239/…

标签： react-native react-navigation react-native-navigation react-navigation-drawer react-navigation-v5

【解决方案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>

这解决了我的问题。

【讨论】：

【解决方案2】：

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

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(
...........
);
};
};

这是链接，示例给出 https://reactnavigation.org/docs/drawer-based-navigation/

【讨论】：

感谢您的回复。是的，我可以这样做......但是这样我必须在我创建的每个新屏幕中添加相同的代码。我想让它集中化，这样我只需要为将来的任何新更改进行一次更改。在自定义抽屉中使用或传递 contentOptions 应该有相同的方法。

【解决方案3】：

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

【讨论】：