时间戳

首页 > 解决方案 > 如何将自定义抽屉项目动态设置为“聚焦”？

typescript - 如何将自定义抽屉项目动态设置为“聚焦”？

问题描述

我的最终目标是根据其他地方设置的一些状态为一些抽屉项目提供自定义背景颜色。我知道为了给抽屉项目提供独特的背景颜色，我需要设置自定义抽屉内容。但是，我遇到了一个问题，我无法让自定义抽屉图标知道它们是否在焦点上。

我最初认为我可以只做一个const [bHomeFocused, setbHomeFocused] = useState(false)（等）并设置状态onPress，然后在其focused上设置属性，但是当更多的抽屉物品进来时，我认为这听起来像是一个笨拙的解决方案。

我敢肯定，我缺少一个简单的答案，因为非自定义 DrawerItems 固有地具有此功能...

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>
    );
}

标签： typescriptreact-nativereact-navigationreact-native-paper

解决方案

没有focused可用于获取当前重点路线的道具。

相反，请使用 DrawerNavigator 组件接收到的道具。看看这个文档。

如果你看到传递给drawerContent组件的 props 列表，你就可以看到stateprops。从文档中，

state- 导航器的导航状态，state.routes包含所有路线的列表

因此，您可以获得路线数组和当前索引，该索引指示当前关注的是哪个屏幕。您可以获取route name并将其与列表中的项目名称进行比较。

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

推荐阅读