react-native - 隐藏在 DrawerNavigator 下的自定义 TabBarIcon - React Navigation v5

Question

我遇到了定制TabBarIcon未完全显示的问题。我已阅读文档、github 以尝试为此找到解决方案。

我可以弄清楚的是，将 BottomTabsNavigator 嵌套在 DrawerNavigator 中可能会产生影响，如果我错了，请纠正我。

这就是我的导航容器的样子

AppNavigator
  Authenticated ? DrawerNavigator : AuthNavigator
  
// Inside DrawerNavigator:
DrawerNavigator
  BottomTabsNavigator
  Rest of the screens

用于说明我的问题的图像：

AppNavigator.js：

// AppNav uses StackNavigation
    <NavigationContainer>
      <Navigator headerMode='none'>
        {authenticated && !isLoading ? (
          <Screen name='DrawerNavigator' component={DrawerNavigator} />
        ) : !authenticated && !isLoading ? (
          <Screen name='AuthNavigator' component={AuthNavigator} />
        ) : (
          <Screen name='Loading' component={LoadingScreen} />
        )}
      </Navigator>
    </NavigationContainer>

DrawerNavigator.js：

// I am using a UI library, UI kitten for the Drawer. But I don't think this is the cause
const { Navigator, Screen } = createDrawerNavigator();

const DrawerNavigator = () => (
  <Navigator
    drawerContent={props => <DrawerContent {...props} />}
    initialRouteName='BottomTabsNavigator'
  >
    <Screen name='BottomTabsNavigator' component={BottomTabsNavigator} />
    <Screen name='ChangePassword' component={ChangePasswordScreen} />
    <Screen name='AuthNavigator' component={AuthNavigator} />
    <Screen name='UserProfile' component={UserProfileScreen} />
    <Screen name='EditProfile' component={EditProfileScreen} />
    <Screen name='ActivityFeed' component={ActivityFeedScreen} />
  </Navigator>
);

BottomTabsNavigator.js：

const BottomTabs = createBottomTabNavigator();

const BottomTabsNavigator = ({ navigation }) => {
  return (
    <BottomTabs.Navigator
      tabBarOptions={{
        showLabel: false,
        activeTintColor: '#407BFF'
      }}
      initialRouteName='Home'
    >
      <BottomTabs.Screen
        name='Home'
        component={MainAppScreen}
        options={{
          tabBarIcon: Some Icon
        }}
      />
      <BottomTabs.Screen
        name='TeamUp'
        component={TeamUpScreen}
        options={{
          tabBarIcon: () => <TeamUpBottomTab navigation={navigation} /> // Custom made 'Icon'
        }}
      />
      <BottomTabs.Screen
        name='ChatOverview'
        component={ChatOverviewScreen}
        options={{
          tabBarIcon: Some Icon
        }}
      />
    </BottomTabs.Navigator>
  );
};

定制的图标是这样的：

import { Platform, Pressable, StyleSheet, Animated, Image } from 'react-native';

    <Pressable onPress={pressHandler} style={styles.teamUp}>
      <Animated.View style={[{ transform: [{ scale: animatedScale }] }]}>
        <Image
          style={styles.logo}
          source={require('../../assets/images/orbital-logo.png')}
        />
      </Animated.View>
    </Pressable>

被困了几天，寻找解决方案并没有太大帮助。

感谢任何帮助，谢谢

标签： react-nativereact-navigationreact-native-navigationreact-navigation-v5react-navigation-bottom-tab