最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

react native - Expo router onclickonpress tab item background color is not configurable - Stack Overflow

programmeradmin5浏览0评论

My project is react-native + expo project. I'm reproeing it on Windows.

I added expo routing, and it works well:

import { Tabs } from "expo-router";
import { Ionicons } from "@expo/vector-icons"; // Import a specific icon set

export default function TabsLayout() {
  return (
    <Tabs
      screenOptions={{
        tabBarActiveBackgroundColor: "transparent", // Ensure no active background color
        tabBarInactiveBackgroundColor: "transparent",
        tabBarActiveTintColor: "blue", // Active state color
        tabBarInactiveTintColor: "black", // Same color for inactive state
      }}
    >
      <Tabs.Screen
        name="index"
        options={{
          headerShown: false,
          tabBarLabel: "Diary",
          tabBarIcon: ({ color, size }) => (
            <Ionicons name="book-outline" color={color} size={size} />
          ),
        }}
      />
      <Tabs.Screen
        name="analytics"
        options={{
          headerShown: false,
          tabBarLabel: "Analytics",
          tabBarIcon: ({ color, size }) => (
            <Ionicons name="bar-chart-outline" color={color} size={size} />
          ),
        }}
      />
      <Tabs.Screen
        name="profile"
        options={{
          headerShown: false,
          tabBarLabel: "Profile",
          tabBarIcon: ({ color, size }) => (
            <Ionicons name="person-outline" color={color} size={size} />
          ),
        }}
      />
    </Tabs>
  );
}

For each tab item, there are 3 states:

  • it is inactive (tabBarInactiveBackgroundColor is used)
  • it is active (it was clicked and now selected, tabBarActiveBackgroundColor is used)
  • it was pressed/clicked (around 0.5 sec there is rounded grayed rectangle on the tab item before it goes to it is active state)

My problem is that there is NO docs about how to remove this irritating grayed rectangle that appeared for 0.5 sec.

I just created the clean expo project using npx create-expo-app@latest StickerSmash from official docs, and reproed the same behavior.

Crosslinking git issue:

If anybody has ever successfully changed this background color - I would be so grateful if you tell me how.

发布评论

评论列表(0)

  1. 暂无评论