Question

我已经使用React导航版本：5.X创建了一个自定义抽屉导航器，但是，当前的活动标签不会在自定义抽屉菜单中突出显示。

我已在DrawerItem元素中添加了“ activeTintColor”，但未将其应用于活动项目。
我还已在抽屉ContentOptions中添加了activeTintColor。但是也没有得到应用。他们可以在自定义抽屉组件中使用此通用选项吗？
我在DrawerItem元素中使用了“ icon”，在其中根据反应导航文档添加了默认道具（颜色，焦点，大小）。因此，图标的颜色为“灰色”（可能是默认行为）。如何更改此默认props值？
默认道具'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/

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

2 个答案: