React Native头部导航按钮条件渲染及背景色异常排查

核心问题 #

你把disabledButton这个函数本身当成布尔值来判断了。在JavaScript里，函数是一个非空对象，只要直接写disabledButton，它永远会被判定为true，根本没执行函数里的条件逻辑，所以按钮背景色一直是tomato。

解决步骤 #

1. 调用函数获取布尔结果：把buttonColor={disabledButton ? 'tomato' : 'cyan'}改成buttonColor={disabledButton() ? 'tomato' : 'cyan'}，加个括号执行函数，才能拿到你写的判断结果。

2. 优化useEffect依赖（可选但重要）：现在你的useEffect依赖的是disabledButton函数，但这个函数每次组件渲染都会重新创建，会导致useEffect频繁触发。可以用useCallback包裹这个函数，让它只在依赖变化时重新生成：

import { useCallback } from 'react';

// 用useCallback包裹条件函数
const disabledButton = useCallback(() => {
  return formik.values.total === "0" && formik.values.type === "" && formik.values.date === null; 
}, [formik.values.total, formik.values.type, formik.values.date]);

这样useEffect的依赖数组[disabledButton]就只会在formik的相关值变化时才触发更新，避免不必要的重渲染。

修改后的完整代码示例 #

import { useEffect, useCallback } from 'react';

// ...其他代码

const disabledButton = useCallback(() => {
  return formik.values.total === "0" && formik.values.type === "" && formik.values.date === null; 
}, [formik.values.total, formik.values.type, formik.values.date]);

useEffect(() => {
  navigation.setOptions({
    headerLeft: () => <BackButton />,
    headerRight: () => (
      <Button
        text="Agregar gasto"
        onPress={formik.handleSubmit}
        buttonColor={disabledButton() ? 'tomato' : 'cyan'} // 这里加括号调用函数
        height={pixelPerfect(33)}
        width={pixelPerfect(150)}
        marginHorizontal={28}
        color={COLORS.white}
        iconName="plus"
        iconColor={COLORS.white}
        paddingVertical={1}
      />
    ),
  });
}, [disabledButton, navigation]); // 记得把navigation也加入依赖

内容的提问来源于stack exchange，提问作者Daniela Avendaño