React Native TabBarItem点击无法切换激活样式的问题求助

核心问题 #

你的代码点击无反应、状态不切换的原因是更新状态时传入了错误的数据类型：

• 初始状态activeItem是字符串类型"fork"
• 但onPress里调用setActiveItem({ active: "fork" })时，把状态改成了对象类型
• 后续判断activeItem === "fork"永远为false，导致图标和文字一直处于灰色的非激活状态

修正代码 #

把setActiveItem的参数改为与初始状态一致的字符串即可：

export function TapBar() {
    const [activeItem, setActiveItem] = React.useState("fork");

    return (
        <View>
            <TabBarItem
                icon="fork"
                label="label"
                onPress={() => {
                    // 直接传入字符串，和初始状态类型保持一致
                    setActiveItem("fork");
                }}
                active={activeItem === "fork"}
            />
        </View>
    );
}

type TabBarItemProps = {
    label: string;
    icon: IconName<24>;
    onPress: () => void;
    active: boolean;
};

function TabBarItem({ label, icon, onPress, active }: TabBarItemProps) {
    return (
        <Pressable onPress={onPress}>
            <Icon color={active ? "red" : "gray"} name={icon} />
            {/* React Native中Text颜色需通过style设置，修正此处 */}
            <Text style={{ color: active ? "red" : "gray" }}>
                {label}
            </Text>
        </Pressable>
    );
}

多Tab扩展说明 #

如果后续要添加多个Tab项，只需给每个项设置唯一的标识字符串即可：

export function TapBar() {
    const [activeItem, setActiveItem] = React.useState("fork");

    return (
        <View style={{ flexDirection: 'row', justifyContent: 'space-around' }}>
            <TabBarItem
                icon="fork"
                label="首页"
                onPress={() => setActiveItem("fork")}
                active={activeItem === "fork"}
            />
            <TabBarItem
                icon="knife"
                label="我的"
                onPress={() => setActiveItem("knife")}
                active={activeItem === "knife"}
            />
        </View>
    );
}

内容的提问来源于stack exchange，提问作者CodingProfile