如何在 React Native 中使抽屉中活动项目的左边框变为绿色？

Question

我的代码结果显示抽屉中带左边框的所有项目都是绿色的，但我想使

active

项目

in green

的左边框。
如何实现结果:(

sideBarComponent.jsx

<>
      <View
        style={{
          flex: 0.35,
          backgroundColor: mainColor,
          borderTopRightRadius: 69,
          borderBottomLeftRadius: 69,
        }}></View>
      <DrawerContentScrollView {...props}>
        <DrawerItemList {...props} />
      </DrawerContentScrollView>
      <TouchableOpacity
        onPress={() => navigation.navigate('Login')}
        style={{
          padding: 20,
          alignItems: 'center',
          margin: 10,
        }}
        activeOpacity={0.8}>
        <Text style={{color: 'white', fontSize: RFPercentage(1.5)}}>
          Se déconnecter
        </Text>
      </TouchableOpacity>
    </>

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',
        drawerItemStyle: {
          borderLeftColor: 'green',
          borderLeftWidth: 2,
        },
      }}>
      <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>
  );
}

Answer 1

您可以在此处查看输出排序视频，

https://drive.google.com/file/d/1CuUW98Rd-MJL4KY3IKKfZG1W-F8Da94t/view?usp=sharing

import { View, Text, Button } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import {
  createDrawerNavigator,
  DrawerContentScrollView,
  DrawerItem,
} from '@react-navigation/drawer';

function Feed({ navigation }) {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Feed Screen</Text>
      <Button title="Open drawer" onPress={() => navigation.openDrawer()} />
      <Button title="Toggle drawer" onPress={() => navigation.toggleDrawer()} />
    </View>
  );
}

function Notifications() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Notifications Screen</Text>
    </View>
  );
}

const CustomDrawerContent = ({ state, descriptors, navigation }) => {
  return (
    <DrawerContentScrollView>
      {state.routes.map((route, index) => {
        const { options } = descriptors[route.key];
        const label = options.title !== undefined ? options.title : route.name;
        const focused = state.index === index;

        // Customize the style for the active item
        const itemStyle = focused ? { borderLeftColor: 'green',borderLeftWidth: 2 } : null;

        return (
          <DrawerItem
            key={route.key}
            label={label}
            style={itemStyle}
            onPress={() => navigation.navigate(route.name)}
          />
        );
      })}
    </DrawerContentScrollView>
  );
};

const Drawer = createDrawerNavigator();

function MyDrawer() {
  return (
    <Drawer.Navigator
      useLegacyImplementation
      drawerContent={(props) => <CustomDrawerContent {...props} />}
      screenOptions={{
        drawerActiveBackgroundColor: '#2f3641',
        drawerActiveTintColor: 'white',
        drawerInactiveTintColor: 'white',
        drawerItemStyle: {
          borderLeftColor: 'green',
          borderLeftWidth: 2,
        },
      }}
    >
      <Drawer.Screen name="Feed" component={Feed} />
      <Drawer.Screen name="Notifications" component={Notifications} />
    </Drawer.Navigator>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <MyDrawer />
    </NavigationContainer>
  );
}

希望我提供的解决方案能够帮助您解决问题。如果它解决了您的问题，请不要忘记接受它作为答案并考虑给它一个赞。谢谢！