Hacktoberfest 2026 : les issues que les mainteneurs ont marquées pour octobre, ouvertes et accessibles aux débutants. Parcourir les issues Hacktoberfest

Indicator not aligned with text in createMaterialTopTabNavigator

Ouverte
#1,000 0 commentaires 0 réactions 0 personnes assignées Voir sur GitHub

Personne n'a encore pris cette issue.

Évaluation

Difficulté
3/5
Temps estimé
1-2 jours
Accessibilité débutants
38/100
Type d'issue
Bug
Clarté
Plutôt claire
Activité
À l'abandon
Stack technique
javascript, react, react-native
Domaine
mobile

Piste de recherche

Commencez par reproduire le problème d’alignement de l’indicateur signalé avec createMaterialTopTabNavigator, en utilisant les catégories dynamiques et la configuration de Tab.Navigator présentées dans l’issue. Comparez le premier, le deuxième et les onglets défilants suivants, et considérez l’issue comme terminée lorsque l’indicateur est aligné de manière cohérente avec le texte de chaque onglet.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

I am trying to implement the top tab with scrollable tabs which are dynamic in number.

Following is my code:

<View style={{flex: 1}}>
        {categories.length > 0 && (
          <Tab.Navigator
            lazy
            tabBarOptions={{
              labelStyle: {
                fontSize: 13,
                fontFamily: gothamMedium,
                textTransform: 'none',
                alignSelf: 'center',
                textAlign: 'center',
              },
              indicatorStyle: {
                backgroundColor: colors.AQUAMARINE,
                height: 4,
              },
              activeTintColor: colors.GREYISH_BROWN,
              inactiveTintColor: colors.WARM_GREY,
              scrollEnabled: true,
            }}>
            {categories.map(category => (
              <Tab.Screen
                options={{
                  title: category.title,
                }}
                name={category.title}
                component={() => <TabList tabData={category} />}
              />
            ))}
          </Tab.Navigator>
        )}  </View>

Which works fine for the first tab:
Untitledd

And here is how second tab looks like:

Untitled

And it gets worse scrolled to 3rd and beyond

Langage dominant
JavaScript
Étoiles
324
Forks
2k
Aucune PR mergée en 30 j

Guide de contribution

Aucun guide de contribution indexé pour ce dépôt

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de react-navigation/react-navigation.github.io

Toutes les issues de react-navigation/react-navigation.github.io

Issues similaires

Plus d'issues JavaScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.