Hacktoberfest 2026: as issues que os mantenedores marcaram para outubro, abertas e boas para iniciantes. Ver issues do Hacktoberfest

Indicator not aligned with text in createMaterialTopTabNavigator

Aberta
#1,000 0 comentários 0 reações 0 responsáveis Ver no GitHub

Ninguém assumiu esta issue ainda.

Avaliação

Dificuldade
3/5
Tempo estimado
1-2 dias
Facilidade para iniciantes
38/100
Tipo de issue
Bug
Clareza
Razoavelmente clara
Status de atividade
Estagnada
Stack de tecnologia
javascript, react, react-native
Domínio
mobile

Direção de pesquisa

Comece reproduzindo o problema relatado de alinhamento do indicador com createMaterialTopTabNavigator, usando as categorias dinâmicas e a configuração de Tab.Navigator mostradas na issue. Compare a primeira, a segunda e as abas roláveis posteriores e considere a issue concluída quando o indicador estiver alinhado consistentemente com o texto de cada aba.

Escrita pelo modelo de indexação a partir do texto da issue.

Descrição

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

Linguagem predominante
JavaScript
Estrelas
324
Forks
2k
Nenhum PR com merge em 30d

Guia de contribuição

Nenhum guia de contribuição indexado para este repositório

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de react-navigation/react-navigation.github.io

Todas as issues de react-navigation/react-navigation.github.io

Issues semelhantes

Mais issues de JavaScript

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.