React-Native Navigation v5: Как изменить tabBarLabel или tabBarIcon и colorBackground вкладки на заданном c экране?

Question

Я использую React Navigation 5, и мне бы хотелось, чтобы моя панель вкладок отличалась на конкретном c экране. Я пробовал много вещей, но безуспешно ... Я бы хотел, чтобы вкладка второго экрана не отображалась только тогда, когда активным экраном является второй экран, а также для изменения цвета фона вкладки, когда я нахожусь на этом же экране. , Вот мой код и 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]: https://i.stack.imgur.com/UGH7L.jpg

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

Answer 1

Вот решение, которое я нашел, чтобы средний значок исчез на среднем экране (см. Код ниже). Но иногда анимация перехода от цвета к другому немного не срабатывает, когда я нажимаю на значки, а не с помощью прокрутки. Средний цвет значка все еще немного виден, когда я go на PhotoScreen, как если бы я не проводил полностью к этому экрану. Но как только я щелкаю куда-то, значок становится правильно невидимым. То же самое, когда я нажимаю go на другой экран, изменение между inactiveColor и activeColor других значков не было выполнено полностью. Решение, которое я нашел для этой ошибки, состоит в том, чтобы не использовать activeTintColor и inactiveTintColor для других значков, но также использовать фокусированные реквизиты для каждого экрана. Чтобы изменить цвет фона панели вкладок в зависимости от того, на каком я экране, я просто добавил разноцветный вид на каждом экране позади панели вкладок. Это работает, потому что мой фон панели вкладок был прозрачным. Я не нашел другого решения непосредственно в модуле реагирования-навигации.

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