React-Native Navigation v5：如何在特定屏幕上更改tabBarLabel或tabBarIcon以及选项卡的colorBackground？

Question

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

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]：https://i.stack.imgur.com/UGH7L.jpg

[[PhotoScreen]：https://i.stack.imgur.com/wAfwz.jpg

Answer 1

这里是我发现使中间图标消失在中间屏幕上的解决方案（请参见下面的代码）。但是有时候，当我单击图标而不是使用滑动时，从一种颜色传递到另一种的动画会失败一些。当我进入PhotoScreen时，中间的图标颜色仍然有点可见，就像我没有完全滑动到该屏幕一样。但是，一旦我单击此处，图标就会正确变为不可见。当我通过单击转到另一个屏幕时，也是如此，尚未完全完成其他图标的inactiveColor和activeColor之间的更改。我为该错误找到的解决方案是不对其他图标使用activeTintColor和inactiveTintColor，而是对每个屏幕都使用聚焦的道具。我仍然没有解决方案来根据我所在的屏幕更改选项卡的backgroundColor。

<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',
        })}
    />