如何在React Navigation中为自定义Tab Bar传递栈级自定义参数

你想要给每个嵌套的栈传递仅作用于整个栈的额外属性（比如图标），让自定义TabBar能获取到这些参数，其实有两种很直接的实现方式，我给你详细拆解下：

方法一：给每个栈单独配置navigationOptions #

你可以直接给创建好的栈添加navigationOptions属性，把图标等自定义参数放在这里，这些属性会被TabNavigator识别并传递给自定义TabBar：

import { createStackNavigator, createBottomTabNavigator } from 'react-navigation';

// 创建各个栈
const MapStack = createStackNavigator({ Map: MapScreen });
// 给Map栈添加全局属性
MapStack.navigationOptions = {
  tabBarIcon: 'map', // 图标标识，也可以直接传React组件
  tabBarLabel: '地图',
  // 还可以加其他自定义属性，比如颜色、描述等
  customProp: 'map-stack-prop'
};

const PlacesStack = createStackNavigator({ Places: PlacesScreen });
PlacesStack.navigationOptions = {
  tabBarIcon: 'places',
  tabBarLabel: '地点'
};

const ArticlesStack = createStackNavigator({ Articles: ArticlesScreen });
ArticlesStack.navigationOptions = {
  tabBarIcon: 'articles',
  tabBarLabel: '文章'
};

const ProfileStack = createStackNavigator({ Profile: ProfileScreen });
ProfileStack.navigationOptions = {
  tabBarIcon: 'profile',
  tabBarLabel: '我的'
};

// 创建Tab导航器
export default createBottomTabNavigator(
  { 
    Map: MapStack, 
    Places: PlacesStack, 
    Articles: ArticlesStack, 
    Profile: ProfileStack, 
  },
  { tabBarComponent: Tabbar }
);

方法二：在TabNavigator的screen配置中直接设置 #

另一种方式是在定义TabNavigator的screen时，直接给每个栈配置navigationOptions，这样结构更集中：

export default createBottomTabNavigator(
  {
    Map: {
      screen: MapStack,
      navigationOptions: {
        tabBarIcon: 'map',
        tabBarLabel: '地图',
        customProp: 'map-stack-prop'
      }
    },
    Places: {
      screen: PlacesStack,
      navigationOptions: {
        tabBarIcon: 'places',
        tabBarLabel: '地点'
      }
    },
    Articles: {
      screen: ArticlesStack,
      navigationOptions: {
        tabBarIcon: 'articles',
        tabBarLabel: '文章'
      }
    },
    Profile: {
      screen: ProfileStack,
      navigationOptions: {
        tabBarIcon: 'profile',
        tabBarLabel: '我的'
      }
    }
  },
  { tabBarComponent: Tabbar }
);

自定义TabBar中读取这些属性 #

接下来在你的自定义Tabbar组件里，通过传入的descriptors props就能拿到这些配置的属性。举个简单的自定义TabBar实现示例：

import React from 'react';
import { View, TouchableOpacity, Text } from 'react-native';
// 假设你用的是react-native-vector-icons的Icon组件
import Icon from 'react-native-vector-icons/Ionicons';

const Tabbar = ({ navigation, state, descriptors }) => {
  return (
    <View style={{ flexDirection: 'row', backgroundColor: '#fff', borderTopWidth: 1, borderTopColor: '#eee' }}>
      {state.routes.map((route, index) => {
        const { options } = descriptors[route.key];
        // 获取我们设置的图标、标签等属性
        const iconName = options.tabBarIcon;
        const label = options.tabBarLabel || route.name;
        const customColor = options.customProp === 'map-stack-prop' ? '#ff5722' : '#666';
        
        const isFocused = state.index === index;

        const onPress = () => {
          const event = navigation.emit({
            type: 'tabPress',
            target: route.key,
            canPreventDefault: true,
          });

          if (!isFocused && !event.defaultPrevented) {
            navigation.navigate(route.name);
          }
        };

        return (
          <TouchableOpacity
            key={route.key}
            onPress={onPress}
            style={{ flex: 1, alignItems: 'center', paddingVertical: 12 }}
          >
            <Icon name={iconName} size={24} color={isFocused ? '#673ab7' : customColor} />
            <Text style={{ fontSize: 12, color: isFocused ? '#673ab7' : customColor, marginTop: 4 }}>
              {label}
            </Text>
          </TouchableOpacity>
        );
      })}
    </View>
  );
};

export default Tabbar;

关键说明 #

这些配置的属性是作用于整个栈的，不会影响栈内的单个页面——栈内页面的navigationOptions是独立配置的，和Tab层的属性完全分开，刚好满足你的需求。不管是传递字符串、组件还是自定义对象，都可以通过这种方式实现。

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