Erstellen einer scrollbaren und dynamischen oberen Tabsleiste mithilfe der React-Navigation

Ich hoffe, dass dies mein erster Artikel zu Medium ist, der für Sie nützlich sein wird: D, So wie mein Wissen über React-Navigation v2, werden wir heute mit React-Navigation eine scrollbare und dynamische obere Tabsleiste erstellen:

Demo

Lasst uns beginnen

Ich benutze:

reaktionsnativ: 0,55,1,
"reagieren": "16.3.1",
"React-Navigation": "^ 2.16.0"

Stellen Sie sich vor, Sie haben beispielsweise ein Array von Daten abgerufen

categories = ['Männer', 'Frau', 'Kinder', 'Jung', 'Älter']

und Sie möchten es auf Registerkarten einstellen, die 2 oder 5 oder 22 Elemente ändern können und die Breite des Bildschirms kann all dies nicht enthalten, so dass Sie es bei der ersten Idee auf "horizontal scroll" setzen werden !!

{Header, createTabNavigator, TabNavigator} aus 'react-navigation' importieren
Auswahl aus './Ausgewählt' importieren
Tabs = navigation => {
    let categories = ['Männer', 'Frau', 'Kinder', 'Jung', 'Älter']
categories = categories.reduce ((val, tab) => {
      val [tab] = {
        Bildschirm: Ausgewählt
      }
      Rückgabewert
    }, {})
const Tabs = createTabNavigator (
      {
        ...Kategorien
      },
      {
        ... TabNavigator.Presets.AndroidTopTabs,
        lazyLoad: false,
        tabBarOptions: {
          scrollEnabled: true,
          Stil: {
            backgroundColor: Colors.snow,
            height: Header.HEIGHT - 15
          },
          tabStyle: {
            Breite: 100
          },
          indicatorStyle: {
            Breite: 0
          }
        }
      }
    )
return 
  }
render () {
    const {navigation} = this.props
    Rückkehr (
      
          {this.Tabs (navigation)}
      
    )
  }
Dieser Code rendert den Bildschirm mit bildlauffähigen Registerkarten.

In der React-Navigation können Sie Folgendes verwenden, wenn Sie Top-Registerkarten erstellen müssen:

createTabNavigator (RouteConfigs, TabNavigatorConfig);

Zuerst verkleinere ich mein Array, um die RouteConfigs aller Bildschirme zu erhalten:

KeyOfScreen: {
  Bildschirm: 'ContainerScreen'
}

Dann verbreite ich "TabNavigator.Presets.AndroidTopTabs" in meinem TabNavigatorConfig, um es von AndroidTopTabs zu verbessern und tabBarOptions anzupassen, indem ich "scrollEnabled: true" und den Stil eines Tabs hinzufüge.

Standardklasse exportieren SelectedScreen erweitert React.Component {
  statische navigationOptions = ({navigation}) => ({
    tabBarLabel: ({focused}) => (
      
        
          {navigation.state.routeName}
        
      
    )
  });
Konstruktor (Requisiten) {
    super (Requisiten);
    this.state = {
      Bildschirm: ''
    };
  }
screenIs = payload => {
    this.setState ({screen: payload.state.routeName})
  }
  
  render () {
    const {navigation} = this.props;
    Rückkehr (
      
        
         {this.state.screen} 
      
    );
  }
}
Mit diesem Code wird der untergeordnete Bildschirm der Registerkarte gerendert und die aktive Registerkarte angehört.

In diesem Fall enthält der untergeordnete Bildschirm "Ausgewählt" den Text der aktiven Registerkarte. NavigationEvents ist eine React-Komponente, die eine deklarative API zum Abonnieren von Navigationsereignissen bereitstellt. Navigationsereignisse werden beim Aktivieren abonniert und beim Deaktivieren vom Abonnement getrennt. Sie können diese auch entsprechend Ihrer Situation verwenden

onDidFocus = {payload => console.log ("hat fokussiert", payload)}
onWillBlur = {payload => console.log ("wird verwischen", payload)}
onDidBlur = {payload => console.log ("hat verwischt", payload)}

Das ist IT

Über mich

Kurz gesagt: Ich bin Software-Ingenieur bei Shopz.io und habe zwei Jahre Erfahrung in der Entwicklung von Mobilgeräten mit React-Native. Ich entwickle auch mit ReactJs, NodeJs, GraphQl, Apollo-Client, Redux, Parse SDK usw.

Magst du das? Klatschen und folgen!

Wenn Sie einen Fehler bemerken oder eine Verbesserung bemerken, hinterlassen Sie bitte einen Kommentar. Wenn Sie Hilfe zu Ihrer React Native-App benötigen, können Sie sich gerne an mich wenden.
LinkedIn, Github, Facebook