如何将左边框颜色添加到活动抽屉菜单？

Question

我正在开发一个 react native 0.62，我在其中实现了抽屉导航器。根据文档，我已经正确添加了 activeBackgroundColor、activeTintColor 等，但根据公司的要求，当菜单处于活动状态时，我想添加带有 activeBackgroundColor 的borderLeftColor。我尝试过使用样式属性，但它对我不起作用。

模拟：

我当前的用户界面：

MainNavigator.js

<Drawer.Navigator initialRouteName="Dashboard" drawerContent={(props) => <DrawerContent {...props} />} hideStatusBar={false} focused={true} labelStyle={{ fontSize: 14, fontFamily: 'OpenSans-SemiBold' }} drawerContentOptions={{ activeBackgroundColor: "#F1F1F1", activeTintColor: "#000000", inactiveTintColor: "#818181",itemStyle: { marginLeft:0, paddingHorizontal: 10, width:'100%', borderRadius: 0}}}  indicatorStyle={{
    borderBottomWidth: 2,
    borderBottomColor: 'red',
}}
 >
    <Drawer.Screen name="Dashboard" component={DashboardStackScreen} options={{
      drawerIcon: ({ focused, size }) => (
        <Image source={require('../assets/images/dashboard.png')} style={{ height: 17.78, width: 16}}  resizeMode="contain"/>
      ),
    }}
    
    />
    <Drawer.Screen name="My Profile" component={MyProfileStackScreen} options={{
      drawerIcon: ({ focused, size }) => (
        <Image source={require('../assets/images/profile.png')} style={{ height: 16, width: 16 }}  resizeMode="contain"/>
      ),
    }} />
</Drawer.Navigator >

抽屉内容.js

<DrawerContentScrollView {...props}  >
                          <DrawerItemList {...props}  
  />
    <DrawerItem     
    labelStyle={{ fontSize: 14, fontFamily: 'OpenSans-SemiBold' }} activeBackgroundColor= "#F1F1F1" activeTintColor="#000000" inactiveTintColor= "#818181"                                        
        label="Logout"
        icon={({ focused, color, size })=>{
            return(
            <Image source={require('../assets/images/logout.png')} style={{ height: 14.36, width: 14.36 }} resizeMode="contain"/>)
         }}   
        onPress={() => {resetData(); props.dispatch({type:'AUTH_FAILURE', payload: ''}); props.dispatch(onClear())}    }                           
    />

</DrawerContentScrollView>

提前谢谢你。

Answer 1

到目前为止，抽屉式导航 5 不支持活动样式。但是您可以将图标包装在 View 中并为其添加边框，这将为您提供类似的东西。 不是完美的解决方案，但会让您接近您提供的预期输出。

<Drawer.Screen
        name="My Profile"
        component={MyProfileStackScreen}
        options={{
          drawerIcon: ({ focused, size }) => (
            <View
              style={
                focused
                  ? {
                      borderLeftColor: 'red',
                      borderLeftWidth: 2,
                      paddingLeft: 5,
                    }
                  : null
              }>
              <Image
                source={require('../assets/images/profile.png')}
                style={{ height: 17.78, width: 16 }}
                resizeMode="contain"
              />
            </View>
          ),
        }}
      />