Bottom Tab导航栏自定义图标按钮点击无页面跳转问题求助

核心问题梳理 #

你的代码里有3个关键错误导致跳转失效：

• AnimatedButton没调用传入的跳转回调：你把onPress()注释掉了，而且传递给组件的不是回调函数，是直接执行了navigation.navigate——这会导致页面加载时就触发跳转，点击按钮时反而没作用。
• 参数传递不匹配：AnimatedButton定义的props是onPress，但你传的是navigation属性，组件根本接收不到这个参数。
• 没必要手动接管Tab跳转：React Navigation的Tab导航本身会处理tab的跳转逻辑，你只需要让自定义按钮触发正确的回调即可。

修正后的代码 #

1. 修复AnimatedButton组件 #

const AnimatedButton = ({ icon: Icon, onPress }) => {
    const scaleValue = useSharedValue(1);

    const handleButtonPress = () => {
        // 执行缩放动画
        scaleValue.value = withTiming(0.8, { duration: 200 }, () => {
            scaleValue.value = withTiming(1, { duration: 200 });
        });
        // 调用传入的跳转回调
        onPress && onPress();
    };
 
    const buttonStyle = useAnimatedStyle(() => ({
        transform: [{ scale: scaleValue.value }]
    }));

    return (
        <AnimatedTouchableOpacity 
            style={[styles.button, buttonStyle]} 
            onPress={handleButtonPress}
        >
            <Icon />
        </AnimatedTouchableOpacity>
    );
};

2. 修复Tab导航的图标配置 #

const Tab = createBottomTabNavigator();

const Three_Butts_Img = () => {
    const navigation = useNavigation();

    return(
        <NavigationContainer>
            <Tab.Navigator>
                <Tab.Screen 
                    name='Music'
                    component={MusicScreen}
                    options={{
                        title:'',
                        tabBarIcon: () => (
                            <AnimatedButton 
                                icon={D_Corchea_1} 
                                onPress={() => navigation.navigate('Music')}
                            />
                        ),
                    }}
                />
                <Tab.Screen 
                    name='Ranking'
                    component={ProfileRanking}
                    options={{ 
                        title:'',
                        tabBarIcon: () => (
                            <AnimatedButton 
                                icon={Corona_1} 
                                onPress={() => navigation.navigate('Ranking')}
                            />
                        ),
                    }}
                 />
                <Tab.Screen 
                    name='Search'
                    component={SearchScreen}
                    options={{
                        title:'',
                        tabBarIcon: () => (
                            <AnimatedButton 
                                icon={Lupa} 
                                onPress={() => navigation.navigate('Search')}
                            />
                        ),
                    }}
                 />
            </Tab.Navigator>
      </NavigationContainer>
    );
};

额外优化建议 #

• 可以利用tabBarIcon自带的focused参数，给图标添加选中/未选中的样式变化（比如颜色），提升交互体验
• 把重复的tabBarIcon逻辑抽成复用函数，减少代码冗余
• 保留onPress && onPress()的判断，避免传入空回调时报错

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