Indicator not aligned with text in createMaterialTopTabNavigator

Offen
#1,000 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Anfängerfreundlichkeit
38/100
Issue-Typ
Bug
Klarheit
Größtenteils klar
Aktivitätsstatus
Veraltet
Tech-Stack
javascript, react, react-native
Bereich
mobile

Rechercherichtung

Beginne damit, das gemeldete Problem mit der Ausrichtung des Indikators bei createMaterialTopTabNavigator zu reproduzieren, und verwende dabei die im Issue gezeigten dynamischen Kategorien und die Tab.Navigator-Konfiguration. Vergleiche den ersten, den zweiten und die späteren scrollbaren Tabs und betrachte das Issue als abgeschlossen, wenn der Indikator konsistent am Text jedes Tabs ausgerichtet ist.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

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

Vorherrschende Sprache
JavaScript
Sterne
324
Forks
2k
Keine gemergten PRs in 30 T.

Beitragsleitfaden

Für dieses Repository ist kein Beitragsleitfaden indexiert

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus react-navigation/react-navigation.github.io

Alle Issues in react-navigation/react-navigation.github.io

Ähnliche Issues

Weitere Issues zu JavaScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.