Hacktoberfest 2026：维护者为十月标记出来的 issue，仍然开放、适合新手。 浏览 Hacktoberfest issue

[iOS 26] Active tint color not adapting when scrolling over light/dark content even though it is set to a DynamicColorIOS

未关闭
  • 哪里不对？
#429 3 条评论 1 个 reaction 已指派 0 人 在 GitHub 查看

维护者通常 1 天内回复

还没有人认领这个 Issue。

评估

难度
4/5
预计耗时
3-5 天
新手友好度
42/100
Issue 类型
缺陷
描述清晰度
基本清楚
活跃度
停滞
技术栈
ios, react-native, typescript
领域
mobile

调研方向

首先处理 react-native-bottom-tabs 对 tabBarActiveTintColor 和 tabBarInactiveTintColor 的处理，使用链接的复现仓库和提供的 iOS 构建步骤。在浅色和深色内容上滚动时，使用 DynamicColorIOS 验证示例；完成的标准是 active tint 在 iOS 26 上像 inactive tint 一样变化。

由索引模型根据 Issue 内容生成。

描述

bug
Before submitting a new issue
  • I tested using the latest version of the library, as the bug might be already fixed.
  • I tested using a supported version of react native.
  • I checked for possible duplicate issues, with possible answers.
Bug summary

On iOS 26, the liquid glass tab bar automatically changes colors of the icons/labels based on the content underneath. However, for this to work, we need to specify a dynamic color (DynamicColorIOS) with a light and dark variant (since there's no callback that is called when the colors need to change). When using react-native-bottom-tabs, dynamic colors work for the inactive tint color, but not for the active tint color, which behaves like a static color - it does not change color based on the content.

Here's the video illustrating this (notice how the inactive tint color changes based on content while the active tint color remains unchanged):

https://github.com/user-attachments/assets/1e9d4cf1-ce52-46ab-a927-b3a68cdd03de

Library version

0.11.2

Environment info
expo-env-info 2.0.7 environment info:
    System:
      OS: macOS 15.7
      Shell: 5.9 - /bin/zsh
    Binaries:
      Node: 22.17.1 - ~/.nvm/versions/node/v22.17.1/bin/node
      Yarn: 4.9.3 - ~/.nvm/versions/node/v22.17.1/bin/yarn
      npm: 10.9.2 - ~/.nvm/versions/node/v22.17.1/bin/npm
      Watchman: 2024.10.14.00 - /opt/homebrew/bin/watchman
    Managers:
      CocoaPods: 1.16.2 - /opt/homebrew/bin/pod
    SDKs:
      iOS SDK:
        Platforms: DriverKit 25.0, iOS 26.0, macOS 26.0, tvOS 26.0, visionOS 26.0, watchOS 26.0
    IDEs:
      Android Studio: 2025.1 AI-251.26094.121.2512.13840223
      Xcode: 26.0/17A324 - /usr/bin/xcodebuild
    npmPackages:
      expo: ~54.0.7 => 54.0.7
      expo-router: ~6.0.4 => 6.0.4
      react: 19.1.0 => 19.1.0
      react-dom: 19.1.0 => 19.1.0
      react-native: 0.81.4 => 0.81.4
      react-native-web: ~0.21.0 => 0.21.1
    Expo Workflow: managed
Steps to reproduce
  1. Clone the repo.
  2. Run yarn to install dependencies.
  3. Run prebuild for iOS: yarn expo prebuild --platform ios.
  4. Build and run the iOS app: yarn ios.
Reproducible sample code
const tabBarActiveTintColor = DynamicColorIOS({
  light: "blue",
  dark: "lightblue",
});

const tabBarInactiveTintColor = DynamicColorIOS({
  light: "black",
  dark: "white",
});

export default function RootLayout() {
  const colorScheme = useColorScheme();

  return (
    <ThemeProvider value={colorScheme === "dark" ? DarkTheme : DefaultTheme}>
      <Tabs
        tabBarActiveTintColor={tabBarActiveTintColor}
        tabBarInactiveTintColor={tabBarInactiveTintColor}
      >
        <Tabs.Screen
          name="index"
          options={{
            title: "Home",
            tabBarIcon: () => ({ sfSymbol: "house.fill" }),
          }}
        />
        <Tabs.Screen
          name="explore"
          options={{
            title: "Explore",
            tabBarIcon: () => ({ sfSymbol: "person.fill" }),
          }}
        />
      </Tabs>

      <StatusBar style="auto" />
    </ThemeProvider>
  );
}
主要语言
TypeScript
星标
1.5k
派生
108
平均合并
22 小时 32 分钟
30 天内合并 PR
8

环境准备

从这里开始

  1. 先读完整个 Issue，再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库，在一个分支上完成修改。
  4. 提交 Pull Request，并在描述里引用这个 Issue 编号。

callstack/react-native-bottom-tabs 的其他 Issue

查看 callstack/react-native-bottom-tabs 的全部 Issue

相似的 Issue

更多 TypeScript Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。