如何使 drawerItem 的 activeTIntColor 和 activebackgroundColor 在反应导航 6 中工作？

Question

我无法在 react-navigation 6 中更改 drawerItem 的 activeTintColor 和 activeBackgroundColor，即使我在抽屉项目上使用这些道具，我也看不到所选中 activeItem tintColor 的任何变化 Item.Below 这是我在使用 activeTintColor 道具设置活动 DrawerItem 色调颜色时使用的代码，但我没有看到任何颜色变化，甚至看不到我在哪个活动选项卡上，但导航有效 fine.I 我能够导航到 DrawerItem 屏幕，只有它处于活动状态被选中的项目似乎没有应用 activeTintColor 等

function DrawerNavigation() {
return (
    <NavigationContainer>
        <Drawer.Navigator
            screenOptions={{
                headerShown: false
            }}
            drawerContent={(nav) => {
                const { navigation } = nav;
                let state = navigation.getState();
                return (
                    <View style={{ flex: 1 }}>
                        <View style={{ alignItems: "center" }}>
                            <View
                                style={{
                                    height: 100,
                                    width: 100,
                                    borderColor: "black",
                                    borderWidth: 1,
                                    borderRadius: 50,
                                    marginVertical: 10,
                                    overflow: "hidden"
                                }}
                            >
                                <Image
                                    source={{
                                        uri: "https://m.cricbuzz.com/a/img/v1/192x192/i1/c170661/virat-kohli.jpg"
                                    }}
                                    resizeMode="cover"
                                    style={{ width: "100%", height: "100%" }}
                                />
                            </View>
                        </View>
                        <View style={{ flex: 1 }}>
                            <DrawerItem
                                label="Home"
                                pressColor="red"
                                icon={() => (
                                    <Image
                                        source={require("../assets/home.png")}
                                        style={{ height: 25, width: 25 }}
                                    />
                                )}
                                onPress={() => navigation.navigate("Home")}
                                activeTintColor="red"
                            />
                            <DrawerItem
                                label="Profile"
                                pressColor="red"
                                icon={() => (
                                    <Image
                                        source={require("../assets/profile.png")}
                                        style={{ height: 25, width: 25 }}
                                    />
                                )}
                                onPress={() => navigation.navigate("Profile")}
                                activeTintColor="red"
                            />
                            <DrawerItem
                                label="Cart"
                                pressColor="red"
                                icon={() => (
                                    <Image
                                        source={require("../assets/cart.png")}
                                        style={{ height: 25, width: 25 }}
                                    />
                                )}
                                onPress={() => navigation.navigate("Cart")}
                                activeTintColor="red"
                            />
                        </View>
                    </View>
                );
            }}
        >
            <Drawer.Screen name="HomeStack" component={StackNavigation} />
        </Drawer.Navigator>
    </NavigationContainer>
);

}

Answer 1

in your <Drawer.Navigator/> There is a property named option which takes an 
object and in that object you can find the drawerActiveTintColor Property. That 
can be used to set the activeTintColor and it will change the background color 
 as well.


<NavigationContainer>
  <Drawer.Navigator initialRouteName="Home">
    <Drawer.Screen name="Home" component={HomeScreen} 
         options={{ drawerActiveTintColor: 'red' }}/>
    <Drawer.Screen name="Notifications" component={NotificationsScreen} />
  </Drawer.Navigator>
</NavigationContainer>

Answer 2

我遇到了类似的问题，因为我正在使用 react-navigator 6.x 但阅读了 5.x 文档。要将 activeTintColor 设置到我的所有屏幕，我最终会这样做：

<NavigationContainer>
  <Drawer.Navigator
    screenOptions={{
      drawerStyle: {
        backgroundColor: "grey",
        width: "100%",
      },
      drawerActiveTintColor: "white",
      drawerInactiveTintColor: "yellow",
    }}
  >
    <Drawer.Screen
      name="One"
      component={OneStackScreen}
      options={{
        title: "One",
        drawerIcon: () => (
          <MaterialIcons name="home" size={24} color="white" />
        ),
      }}
    />
    <Drawer.Screen
      name="Two"
      component={TwoStackScreen}
      options={{
        title: "Ma page",
      }}
    />
  </Drawer.Navigator>
</NavigationContainer>

Answer 3

<DrawerContentScrollView {...props}>
            <View style={Styles.DrawerHeader}>
                <View style={Styles.ProfileImg}>
                    {userPic ? (
                        <Image
                            source={{
                                uri: userPic
                            }}
                            resizeMode="cover"
                            style={{ width: "100%", height: "100%" }}
                        />
                    ) : (
                        <Image
                            source={{
                                uri: "https://m.cricbuzz.com/a/img/v1/192x192/i1/c170661/virat-kohli.jpg"
                            }}
                            resizeMode="cover"
                            style={{ width: "100%", height: "100%" }}
                        />
                    )}
                </View>
                <Text style={Styles.ProfileText}>{user}</Text>
            </View>
            <View style={Styles.Divider}></View>
            {state.routes.map((route) => {
                return (
                    <DrawerItem
                        key={route.key}
                        icon={({ focused }) => (
                            <Icon name={listItemIcon} size={20} color={focused ? Colors.Primary : "black"} />
                        )}
                        label={({ color }) => <Text style={{ color }}>{route.name}</Text>}
                        focused={state.routes.findIndex((e) => e.name === route.name) === state.index}
                        activeTintColor={Colors.Primary}
                        onPress={() => navigation.navigate(route.name)}
                        pressColor={Colors.StatusbarColor}
                    />
                );
            })}
        </DrawerContentScrollView>

如何使 drawerItem 的 activeTIntColor 和 activebackgroundColor 在反应导航 6 中工作？

How to make activeTIntColor and activebackgroundColor of drawerItem work in react navigation 6?

react-native

react-navigation

react-navigation-drawer