自定义顶部标签栏用指示器反应导航

Question

我正在阅读 react-navigation 顶部标签栏的文档，我需要制作一个自定义栏，所以他们在他们的文档https://reactnavigation.org/docs/material-top-tab-navigator/#tabbar中是这样的，我知道如何修改某些样式，但是如果我想要顶部栏默认具有的指示器，我该怎么做？ 这是我的代码。

   import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';

const Tab = createMaterialTopTabNavigator();
    function MyTabBar({ state, descriptors, navigation, position })
{
    return (
        <View style={Styles.Container}>
            {
                state.routes.map((route, index) => 
                {
                    const { options } = descriptors[route.key];
                    const label =
                        options.tabBarLabel !== undefined
                        ? options.tabBarLabel
                        : options.title !== undefined
                        ? options.title
                        : route.name;
        
                    const isFocused = state.index === index;
        
                    const onPress = () => 
                    {
                        const event = navigation.emit
                        ({
                            type: 'tabPress',
                            target: route.key,
                            canPreventDefault: true,
                        });
        
                        if (!isFocused && !event.defaultPrevented) 
                        {
                            navigation.navigate(route.name);
                        }
                    };
    
                    const onLongPress = () => 
                    {
                        navigation.emit
                        ({
                            type: 'tabLongPress',
                            target: route.key,
                        });
                    };
    
                    const inputRange = state.routes.map((_, i) => i);
                    const opacity = Animated.interpolate(position, 
                    {
                        inputRange,
                        outputRange: inputRange.map(i => (i === index ? 1 : 0.5)),
                    });
    
                    return (
                        <TouchableOpacity
                            accessibilityRole="button"
                            accessibilityState={isFocused ? { selected: true } : {}}
                            accessibilityLabel={options.tabBarAccessibilityLabel}
                            testID={options.tabBarTestID}
                            onPress={onPress}
                            onLongPress={onLongPress}
                            style={Styles.TabButton}
                        >
                            <Animated.Text style={[Styles.Text, { opacity }]}>
                                {
                                    label
                                }
                            </Animated.Text>
                        </TouchableOpacity>
                    );
                })}
            </View>
        );
    }

const TopTab = (props) => 
{
    return (
<Tab.Navigator
            initialRouteName='Home'
            lazy
            lazyPreloadDistance={3}
            tabBar={props => <MyTabBar {...props} />}
        >
            <Tab.Screen name='Home'>
                { () => <Home {...props} /> }
            </Tab.Screen>
        </Tab.Navigator>
    );
}

顺便说一句，我知道这不是问题，但你可以看到我通过回调传递了组件的道具，但我读到这是一个不好的做法。 那么有没有另一种方法可以做到这一点，并把道具组件={Home}