React Navigation：Tab嵌套Stack时动态切换Tab图标技术咨询

这问题我之前做项目时也碰到过，其实通过React Navigation的导航配置就能轻松实现，给你两种实用的方案，完美适配你现在的代码结构：

方案一：在Stack页面内动态更新Tab图标 #

这种方式适合在特定页面（比如你的addocassion）进入时切换图标，离开时自动恢复，灵活性很高。

函数组件版本（推荐） #

在addocassion组件里，利用useEffect监听页面的focus和blur事件，动态修改Tab图标：

import { useEffect } from 'react';
import Econ from '你的图标组件路径';

function Addocassion({ navigation }) {
  useEffect(() => {
    // 页面聚焦时，设置新的Tab图标
    const focusListener = navigation.addListener('focus', () => {
      navigation.setOptions({
        tabBarIcon: ({ tintColor }) => (
          <Econ name="这里填新图标名，比如plus" style={{color: tintColor}} size={16} />
        )
      });
    });

    // 页面失焦时，恢复原来的Tab图标
    const blurListener = navigation.addListener('blur', () => {
      navigation.setOptions({
        tabBarIcon: ({ tintColor }) => (
          // 替换成你原本想给这个Tab用的图标
          <Econ name="gift" style={{color: tintColor}} size={16} />
        )
      });
    });

    // 组件卸载时移除监听，避免内存泄漏
    return () => {
      focusListener();
      blurListener();
    };
  }, [navigation]);

  // 你的组件内容
  return <div>addocassion页面内容</div>;
}

类组件版本 #

如果你的addocassion是类组件，可以用生命周期钩子实现：

import Econ from '你的图标组件路径';

class Addocassion extends React.Component {
  componentDidMount() {
    // 进入页面时设置新图标
    this.props.navigation.setOptions({
      tabBarIcon: ({ tintColor }) => (
        <Econ name="新图标名" style={{color: tintColor}} size={16} />
      )
    });
  }

  componentWillUnmount() {
    // 离开页面时恢复原图标
    this.props.navigation.setOptions({
      tabBarIcon: ({ tintColor }) => (
        <Econ name="原图标名" style={{color: tintColor}} size={16} />
      )
    });
  }

  render() {
    return <div>addocassion页面内容</div>;
  }
}

方案二：在Tab导航器中根据路由状态动态判断 #

这种方式是全局判断当前Stack的活跃页面，自动切换图标，不用在每个页面单独处理，适合多个页面需要切换图标的场景。

修改你的Tab导航器配置，给wishStack对应的Tab添加动态的navigationOptions：

const Tab = createBottomTabNavigator({
  Invitations:{
    screen: invitationStack,
    navigationOptions:() =>({
      tabBarIcon: ({ tintColor }) => ( <Econ name="users" style={{color:tintColor}} size={16} /> ),
    }) 
  },
  Wishlist:{
    screen: wishListStack,
    navigationOptions:() =>({
      tabBarIcon: ({ tintColor }) => ( <Econ name="gift" style={{color:tintColor}} size={16} /> ),
    }) 
  },
  " ":{
    screen: wishStack,
    navigationOptions: ({ navigation }) => {
      // 获取当前Stack的活跃路由
      const activeRoute = navigation.state.routes[navigation.state.index];
      // 判断是否处于addocassion页面
      const isOnAddOccasion = activeRoute.routeName === 'addocassion';

      return {
        tabBarIcon: ({ tintColor }) => (
          <Econ 
            name={isOnAddOccasion ? "新图标名" : "原图标名"} 
            style={{color: tintColor}} 
            size={16} 
          />
        )
      };
    }
  },
  Notifications:Notifications,
  Profile:{
    screen: profileStack,
    navigationOptions:() =>({
      tabBarIcon: ({ tintColor }) => ( <Econ name="user-circle" style={{color:tintColor}} size={16} /> ),
    }) 
  }
});

小提示 #

• 记得把代码里的"新图标名"和"原图标名"替换成你实际需要的Econ图标名称；
• 从你的代码写法来看，应该用的是React Navigation 4.x或更早版本，上面的代码可以直接适配；如果是5.x+版本，API会有差异（比如用useNavigationState代替navigation.state），需要稍作调整；
• 方案一更适合单个页面的特殊需求，方案二更适合统一管理多个页面的图标切换逻辑。

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