typescript - Hvordan setter jeg tilpassede skuffelementer til "fokusert" dynamisk?

Mitt endelige mål her er å gi noen skuffelementer tilpassede bakgrunnsfarger avhengig av noen tilstander som er satt andre steder. Jeg forstår at for å gi unike bakgrunnsfarger til skuffelementer, må jeg sette opp tilpasset skuffinnhold. Imidlertid har jeg et problem hvor jeg ikke får de tilpassede skuffikonene til å vite om de er i fokus eller ikke.

Jeg trodde opprinnelig at jeg bare kunne gjøre en const [bHomeFocused, setbHomeFocused]=useState(false) (osv.) og sette state på onPress og deretter sette focused-egenskapen på det, men når mye flere skuffelementer kommer inn, tror jeg det høres ut som en uhåndterlig løsning.

Jeg er sikker på at det finnes et enkelt svar som jeg overser, ettersom ikke-tilpassede DrawerItems har denne funksjonaliteten innebygd...

import { Drawer } from 'react-native-paper'
import { createDrawerNavigator, DrawerNavigationProp, DrawerItem, DrawerContentScrollView, DrawerItemList, DrawerContentComponentProps, DrawerContentOptions } from '@react-navigation/drawer';

function CustomDrawerContent(props: DrawerContentComponentProps<DrawerContentOptions>) {

    return (
        <DrawerContentScrollView {...props}>
            <Drawer.Section>
                <DrawerItem
                    label="Dashboard"
                    labelStyle={{ color: colorTheme.normalText }}
                    icon={() => <Icon name="book" type="feather" size={26} color={colorTheme.normalText} />}
                    activeBackgroundColor={colorTheme.panel}
                    inactiveBackgroundColor={colorTheme.cyan}
                    onPress={() => {
                        props.navigation.navigate('Dashboard')
                    }}
                />
            </Drawer.Section>
            <DrawerItem
                label="Home"
                labelStyle={{ color: colorTheme.normalText }}
                icon={() => <Icon name="home" type="feather" size={26} color={colorTheme.normalText} />}
                activeBackgroundColor={colorTheme.panel}
                inactiveBackgroundColor={colorTheme.red}
                onPress={() => {
                    props.navigation.navigate('HomeStack')
                }}
            />
        </DrawerContentScrollView>
    );
}

export type DrawerParamList = {
    Dashboard: undefined;
    HomeStack: undefined;
};

export type DrawerProps<T extends keyof DrawerParamList> = {
    navigation: DrawerNavigationProp<DrawerParamList, T>;
    route: RouteProp<DrawerParamList, T>;
};

const AppDrawer = createDrawerNavigator<DrawerParamList>();

export default function MainDrawer({ route, navigation }: TopLevelStackProps<"MainDrawer">) {

    return (
        <AppDrawer.Navigator
            drawerStyle={globalStyles.drawer}
            drawerContent={
                (props) => <CustomDrawerContent {...props} />
            }
            drawerContentOptions={{
                labelStyle: { color: colorTheme.normalText },
                activeBackgroundColor: colorTheme.panel,
                inactiveBackgroundColor: colorTheme.background,
            }}
        >
            <AppDrawer.Screen
                name="Dashboard"
                component={Dashboard}
                options={{
                    unmountOnBlur: true,
                }}
            />
            <AppDrawer.Screen
                name="HomeStack"
                component={HomeStack}
                options={{
                    unmountOnBlur: true,
                }}
            />
        </AppDrawer.Navigator>
    );
}

Svar #1

Det finnes ingen focused-prop som du kan bruke for å få den gjeldende fokuserte ruten.

Bruk i stedet de egenskapene som mottas av komponenten av DrawerNavigator. Sjekk ut denne dokumentasjonen.

Hvis du ser på listen over props som sendes til drawerContent-komponenten, kan du se state-propen. Fra dokumentasjonen,

state - Navigasjonsstatusen til navigatøren, state.routes inneholder en liste over alle ruter

Så du kan få matrisen av ruter, og gjeldende indeks, som viser hvilken skjerm som for øyeblikket er fokusert. Du kan få rutenavn og sammenligne det med navnet på elementet i listen din.

const {state} = props
const {routes, index} = state; //Not sure about the name of index property. Do check it out by logging the 'state' variable.
const focusedRoute = routes[index];

Relaterte artikler