英文:
How to make the border left of active item in drawer in green in react native?
问题
You want to make the left border of the active item in green. To achieve this, you can update the drawerItemStyle in your screenOptions as follows:
drawerItemStyle: (props) => {
const focusedRouteName = props.route.name; // Get the name of the focused route
const isActive = focusedRouteName === props.activeRoute; // Check if the route is active
return {
borderLeftColor: isActive ? 'green' : 'transparent',
borderLeftWidth: 2,
};
},
Make sure to pass the activeRoute to your SideBarComponent so that you can determine which route is currently active and apply the green border accordingly.
Also, ensure that you have defined activeRoute properly in your code to represent the active route's name.
This code dynamically sets the border color to green for the active route and makes it transparent for others.
英文:
my result of my code display all items in drawer with border left are green, but i want to make the border left of active item in green .
how to achieve the result 
this image describe the result of my code
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>
);
}
答案1
得分: 0
以下是代码的翻译部分：
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="打开抽屉" onPress={() => navigation.openDrawer()} />
<Button title="切换抽屉" onPress={() => navigation.toggleDrawer()} />
</View>
);
}
function Notifications() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>通知屏幕</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;
// 自定义活动项的样式
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 AppDrawer() {
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>
<AppDrawer />
</NavigationContainer>
);
}
请注意，上述翻译是代码的部分，不包括您提供的外部链接和其他非代码内容。如果您需要其他部分的翻译，请提供具体的文本或说明。
英文:
You can view output video here,
https://drive.google.com/file/d/1CuUW98Rd-MJL4KY3IKKfZG1W-F8Da94t/view?usp=sharing
mport { 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 AppDrawer() {
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>
<AppDrawer />
</NavigationContainer>
);
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论