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

Question

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

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

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

导航器代码：

自定义抽屉组件：

当前活动标签：主页

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>

这为我解决了这个问题。

Answer 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/

Answer 3

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