React-Native 导航 v5 : How to change a tabBarLabel or tabBarIcon and the colorBackground of the tab on a specific screen?

Question

我正在使用 React Navigation 5，我希望我的选项卡栏在特定屏幕上有所不同。我尝试了很多事情但没有成功......我希望第二个屏幕的 tabIcon 仅当事件屏幕是第二个屏幕时才可见，并且当我位于同一屏幕上时也更改选项卡背景颜色。这是我的代码和 2 张照片来展示我想做的事情。

import React from 'react';
import 'react-native-gesture-handler';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';

import Photo from './Home';
import Folders from './Folders';
import Search from './Search';

import CustomIcon from './components/CustomIcon.js';

import { Dimensions } from "react-native";

const Tab = createMaterialTopTabNavigator();

export default function TabNavigator() {
  return (
    <Tab.Navigator
    initialRouteName = 'Photo' 
    tabBarOptions= {{
        activeTintColor: '#FFCD29',
        inactiveTintColor: 'white',
        showLabel: true, //icons in label because maxsize of tabBarIcons is 25
        showIcon: false,
        indicatorStyle:{height: 0},
        pressColor: 'transparent', 
        pressOpacity: 0, 
        style: {
            paddingBottom: 24,
            backgroundColor: 'transparent', 
            // I WANT TAB BACKGROUND COLOR TO BE TRANSPARENT ON PHOTO SCREEN BUT BLACK ON OTHER SCREENS
            position: "absolute",
            bottom: 0,
            width: Dimensions.get('window').width
        }
    }}
    >
        <Tab.Screen 
            name="Search" 
            component={Search} 
            options={{ 
                tabBarLabel: ({ color }) => (
                    <CustomIcon name='SearchScreen' size={45} color={color}/>
                ),
                tabBarAccessibilityLabel: 'SearchScreen',
            }}
        />
        <Tab.Screen 
            name="Photo" 
            component={Photo} 
            options={{ 
                tabBarLabel: ({ color }) => (
                    <CustomIcon name='PhotoScreen' size={45} color={color}/>
                ),
                // I DONT WANT TO SEE THIS ICON WHEN ACTIVESCREEN IS PHOTOSCREEN
                tabBarAccessibilityLabel: 'Appareil Photo',
            }}
        />
        <Tab.Screen 
            name="Dossiers" 
            component={Folders}
            options={{ 
                tabBarLabel: ({ color }) => (
                    <CustomIcon name='FolderScreen' size={45} color={color}/>
                ),
                tabBarAccessibilityLabel: 'Dossiers',
            }}
            style = {{backgroundColor: 'black',}}
        />
    </Tab.Navigator>
  );
}

[SearchScreen]: /image/UGH7L.jpg

[PhotoScreen]: /image/wAfwz.jpg

Answer 1

这是我发现的使中间图标在中间屏幕上消失的解决方案(参见下面的代码)。但有时，当我单击图标而不是使用滑动时，从一种颜色传递到另一种颜色的动画会稍微失败。当我进入 PhotoScreen 时，中间的图标颜色仍然有点可见，就像我没有完全滑动到该屏幕一样。但一旦我点击某个地方，图标就会正确地变为不可见。同样，当我通过单击进入另一个屏幕时，其他图标的 inactiveColor 和 activeColor 之间的更改尚未完成。我针对此错误找到的解决方案是不对其他图标使用 activeTintColor 和 inactiveTintColor ，而是对每个屏幕使用聚焦 Prop 。要根据我所在的屏幕更改选项卡栏的背景颜色，我只是在选项卡栏后面的每个屏幕上添加了不同颜色的 View 。它有效是因为我的标签栏背景颜色是透明的。我还没有直接在react-navigation模块中找到其他解决方案。

<Tab.Screen 
        name="Photo" 
        component={Home} 
        options={({ route }) => ({
            tabBarLabel: ({ focused }) => {
                let iconColor;

                if (route.name === 'Photo') {
                iconColor = focused
                    ? 'transparent'
                    : 'white';
                } 

                return <CustomIcon name='PhotoScreen' size={45} color={iconColor}/>;
            },
            tabBarAccessibilityLabel: 'Appareil Photo',
        })}
    />