2023年如何设置Tab.Navigator底部导航栏的背景色？

你遇到的问题是因为React Navigation 6及以上版本已废弃tabBarOptions属性，相关样式配置需要迁移到screenOptions内部的对应字段中。

正确的配置方式 #

将背景色、活跃颜色等样式直接写入screenOptions，和你已有的tabBarIcon配置合并：

<Tab.Navigator 
  initialRouteName='CustomerStack'
  screenOptions={({ route }) => ({    
    tabBarIcon: ({ focused, color, size }) => {
      let iconName;
      const rn = route.name;
      if (rn === "CustomDrawer" || rn === "CustomerStack") {
        iconName = 'home'; // 聚焦/非聚焦图标相同，可简化代码
      } else if (rn === "Cart") {
        iconName = 'shopping-cart';
      } else if (rn === "Account") {
        iconName = 'user';
      }
      return <User name={iconName} size={size} color={color} />
    },
    // 导航栏样式配置
    tabBarActiveTintColor: '#e91e63',
    tabBarInactiveTintColor: '#888', // 可选：设置非活跃状态的图标文字颜色
    tabBarStyle: {
      backgroundColor: 'orange', // 底部导航栏背景色
      height: 60, // 可选：自定义导航栏高度
      paddingBottom: 5, // 可选：调整内边距优化布局
    },
  })}
>
  {/* 你的Tab.Screen组件 */}
  <Tab.Screen name="CustomDrawer" component={CustomDrawerScreen} />
  <Tab.Screen name="CustomerStack" component={CustomerStackScreen} />
  <Tab.Screen name="Cart" component={CartScreen} />
  <Tab.Screen name="Account" component={AccountScreen} />
</Tab.Navigator>

额外注意事项 #

• 若你使用了自定义TabBar组件（通过tabBar属性指定），则需在自定义组件内部直接设置背景色样式，上述配置不会生效。
• 检查是否有全局样式或父组件样式覆盖了导航栏背景色，可通过开发者工具查看元素样式优先级排查冲突。

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