Блог

У меня возникла проблема, когда выполненное на заказ TabBarIcon изображение отображается не полностью. Я прочитал документы, github, чтобы попытаться найти решение для этого.

Что я мог понять, так это то, что вложение нижнего навигатора в DrawerNavigator может иметь последствия, пожалуйста, поправьте меня, если я ошибаюсь.

Вот как будет выглядеть мой навигационный контейнер

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

Изображение для иллюстрации моей проблемы:

AppNavigator.js:

 // AppNav uses StackNavigation
    <NavigationContainer>
      <Navigator headerMode='none'>
        {authenticated amp;amp; !isLoading ? (
          <Screen name='DrawerNavigator' component={DrawerNavigator} />
        ) : !authenticated amp;amp; !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>
  );
};
 

The custom made Icon is as such:

 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>
 

Been stuck for a few days, and searching for a solution isn’t helping much.

Appreciate any help, thank you