react-native - 如何使drawerItem的activeTIntColor和activebackgroundColor在反应导航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>
);

}

标签： react-nativereact-navigationreact-navigation-drawer

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>