React Native实现抽屉激活项左侧绿色边框的方法

问题说明 #

当前你的抽屉导航所有菜单项左侧都带有绿色边框，需求调整为仅激活（active）状态的菜单项左侧显示绿色边框，未激活项不显示该边框。

修改方案 #

在SideBar.jsx的screenOptions配置中，移除全局生效的drawerItemStyle，改用drawerActiveStyle和drawerInactiveStyle分别控制激活、未激活状态的样式：

修改后的SideBar.jsx代码 #

function SideBar() {
  const DrawerNav = createDrawerNavigator();
  return (
    <DrawerNav.Navigator
      drawerContent={props => <SideBarComponent {...props} />}
      screenOptions={{
        headerShown: false,
        drawerStyle: {
          borderTopRightRadius: 70,
          backgroundColor: mainColor,
        },
        drawerActiveBackgroundColor: '#2f3641',
        drawerActiveTintColor: 'white',
        drawerInactiveTintColor: 'white',
        // 仅给激活项设置左侧绿色边框
        drawerActiveStyle: {
          borderLeftColor: 'green',
          borderLeftWidth: 2,
        },
        // 未激活项去掉左侧边框
        drawerInactiveStyle: {
          borderLeftWidth: 0
        }
      }}>
      <DrawerNav.Screen name="Home" component={Home} />
      <DrawerNav.Screen
        name="Contrôle à la chaîne"
        component={ControleChaine}
      />
      <DrawerNav.Screen name="Prototype" component={Prototype} />
      <DrawerNav.Screen
        name="Action de correction"
        component={ActionCorrection}
      />
      <DrawerNav.Screen name="Contrôle finale" component={MatiereP} />
      <DrawerNav.Screen name="Matiére premiére" component={ControleFinal} />
    </DrawerNav.Navigator>
  );
}

关键说明 #

• drawerActiveStyle：专门定义激活状态菜单项的样式，这里设置左侧绿色边框
• drawerInactiveStyle：定义未激活状态样式，通过borderLeftWidth: 0移除边框；如果需要保留边框但视觉隐藏，也可以设置borderLeftColor为和抽屉背景色一致的值
• sideBarComponent.jsx无需修改，样式控制均在导航器配置中完成

内容的提问来源于stack exchange，提问作者kamkoum mondher