React-Navigation：如何在navigationOptions中根据未读消息切换图标？

嘿，这个问题我刚好处理过好几次，给你梳理几种靠谱的方案，你可以根据自己的场景选最优的：

1. 直接在navigationOptions里用条件判断（适合静态/外部传递的未读状态） #

如果你的未读消息状态是通过组件props传进来的，或者是可以直接从navigation参数里拿到的静态值，完全可以直接在navigationOptions里写if语句或者三元表达式，根本不用额外折腾状态。

举个实际的例子，假设你的消息页面需要接收一个hasUnreadMessages的标记：

class MessagesScreen extends React.Component {
  static navigationOptions = ({ navigation }) => {
    // 先从navigation参数里取未读状态，默认设为false
    const hasUnread = navigation.getParam('hasUnreadMessages', false);
    
    return {
      tabBarIcon: ({ tintColor }) => {
        // 这里用if-else或者三元表达式都可以，看你习惯
        if (hasUnread) {
          return <Icon name="message-circle" color={tintColor} />; // 有未读的实心图标
        } else {
          return <Icon name="message-circle-outline" color={tintColor} />; // 无未读的空心图标
        }
        // 嫌啰嗦的话，用三元写法更简洁：
        // return hasUnread ? <Icon name="message-circle" color={tintColor} /> : <Icon name="message-circle-outline" color={tintColor} />;
      }
    };
  };

  // ... 组件其他业务逻辑
}

这种方式的好处就是简单直接，不需要额外的状态管理，适合未读状态由外部（比如父组件、路由跳转时）传递的场景。

2. 结合组件状态（适合内部动态更新的未读状态） #

如果未读消息状态是在组件内部动态变化的（比如组件自己调用接口获取未读数量、用户读了消息后状态改变），那你就得用组件的state来管理了——因为navigationOptions本身是静态的，没法直接响应组件state的变化，这时候需要用setParams（类组件）或者setOptions（函数组件）来同步状态到导航配置里。

类组件写法： #

class MessagesScreen extends React.Component {
  state = {
    hasUnreadMessages: false
  };

  componentDidMount() {
    // 模拟调用接口获取未读消息数量
    fetchUnreadMessages().then(count => {
      const hasUnread = count > 0;
      this.setState({ hasUnreadMessages: hasUnread });
      // 关键一步：更新navigation的参数，让navigationOptions能感知到变化
      this.props.navigation.setParams({ hasUnreadMessages: hasUnread });
    });
  }

  static navigationOptions = ({ navigation }) => {
    const hasUnread = navigation.getParam('hasUnreadMessages', false);
    return {
      tabBarIcon: ({ tintColor }) => (
        hasUnread ? <Icon name="message-circle" color={tintColor} /> : <Icon name="message-circle-outline" color={tintColor} />
      )
    };
  };

  // 比如用户点击了消息，未读状态变化时，也要同步更新导航参数
  markAsRead = () => {
    this.setState({ hasUnreadMessages: false });
    this.props.navigation.setParams({ hasUnreadMessages: false });
  };
}

函数组件+Hooks写法： #

如果用的是函数组件，写法会更清爽，用useNavigation和useEffect就能搞定：

import { useNavigation } from '@react-navigation/native';
import { useEffect, useState } from 'react';

function MessagesScreen() {
  const [hasUnreadMessages, setHasUnreadMessages] = useState(false);
  const navigation = useNavigation();

  useEffect(() => {
    // 初始化获取未读状态
    fetchUnreadMessages().then(count => {
      const hasUnread = count > 0;
      setHasUnreadMessages(hasUnread);
      // 直接更新导航选项
      navigation.setOptions({
        tabBarIcon: ({ tintColor }) => (
          hasUnread ? <Icon name="message-circle" color={tintColor} /> : <Icon name="message-circle-outline" color={tintColor} />
        )
      });
    });

    // 当未读状态变化时，自动更新导航图标
  }, [hasUnreadMessages, navigation]);

  // ... 组件其他内容
}

3. 全局状态管理（适合跨组件共享未读状态） #

如果未读消息状态需要在多个组件之间共享（比如消息列表页、首页Tab栏、个人中心都要显示未读标记），那最好用Redux、MobX这类全局状态管理工具。这样不管哪个组件更新了未读状态，所有用到这个状态的地方都会同步更新。

拿Redux举个例子：

class MessagesScreen extends React.Component {
  static navigationOptions = ({ navigation }) => {
    const hasUnread = navigation.getParam('hasUnreadMessages', false);
    return {
      tabBarIcon: ({ tintColor }) => (
        hasUnread ? <Icon name="message-circle" color={tintColor} /> : <Icon name="message-circle-outline" color={tintColor} />
      )
    };
  };

  componentDidUpdate(prevProps) {
    // 当全局状态里的未读状态变化时，同步更新导航参数
    if (this.props.hasUnread !== prevProps.hasUnread) {
      this.props.navigation.setParams({ hasUnreadMessages: this.props.hasUnread });
    }
  }

  // ... 其他逻辑
}

// 从Redux全局状态里取未读状态
const mapStateToProps = state => ({
  hasUnread: state.messages.unreadCount > 0
});

export default connect(mapStateToProps)(MessagesScreen);

最后说下最优方案怎么选： #

• 如果未读状态是静态的，或者只由外部传递，选方案1，最简单高效；
• 如果未读状态是组件内部动态更新的，选方案2，用组件state+setParams/setOptions就够了；
• 如果未读状态需要跨多个组件共享，选方案3，全局状态管理能避免状态不同步的问题。

另外，完全不用刻意避免if语句，在navigationOptions里写条件判断是完全合理的——三元表达式只是更简洁的写法，本质和if-else是一样的，选你看着舒服的就行。

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