如何使drawerItem的activeTIntColor和activebackgroundColor在react navigation 6中工作？

Question

我无法在react-navigation 6中更改drawerItem的activeTintColor和activeBackgroundColor，尽管我在抽屉项目上使用这些道具，但我看不到所选项目中activeItem TintColor变化的任何变化。下面是代码我正在使用道具 activeTintColor 来设置活动 DrawerItem 色调颜色，但我没有看到颜色有任何变化，甚至我看不到我所在的活动选项卡，但导航工作正常。我能够要导航到 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

<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>

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

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 4

您可以添加自定义的Drawer组件并根据需要使用它：

const CustomDrawerContent = ({ navigation, state }) => {
  return (
    <DrawerContentScrollView>
      <View style={styles.drawerView}>
        <Text style={styles.headerText}>Custom Drawer</Text>
      </View>
      <DrawerItem
        label="Home"
        onPress={() => navigation.navigate('Home')}
        focused={state.index === 0} // here right hand operator will be changing based on your drawer items.
        activeBackgroundColor="#8e8e8e"
      />
      {/* Add more DrawerItems for other navigation options */}
    </DrawerContentScrollView>
  );
};

这里设置属性的主要部分是：

focused={state.index === 0}
activeBackgroundColor="#8e8e8e"