Wie wir das Tabbar-Plugin mit React Native erstellt haben

Heute ist React Native eine der führenden Optionen für die App-Entwicklung, wenn es um die plattformübergreifende Entwicklung von Apps geht. Bei Mindinventory lieben wir es wie alles andere, aber das reicht einem Hardcore-Entwickler nicht aus, um seinen Wunsch zu befriedigen, etwas daraus zu machen diese Welt, nicht wahr? Normalerweise ist das Material Design von Google heutzutage die Standardauswahl, wenn es um hochwertige UI / IX geht. Wir haben uns überlegt, warum wir nicht mit dem neuesten Material Design und React Native etwas Cooles erstellen sollten, und das hat uns zu diesem Konzept geführt, das Wirklichkeit wird.

Code für diese schöne Tabbar zu schreiben war nicht so verdammt einfach, wie es auf den ersten Blick scheinen mag. Wir haben verschiedene Wege ausprobiert, um es zu entwickeln, und schließlich haben wir es getan, die genauso funktionieren können wie geplant.

Schauen wir uns die Entwicklungsgeschichte dieser Vision an.

Wie üblich haben wir das Gleiche getan, um diese Idee in eine App zu integrieren. Wir haben nach verschiedenen Plugins gesucht, die uns die erwarteten Ergebnisse liefern konnten, aber alles war vergebens und es war kein Plugin verfügbar, das funktionieren konnte. Nun, das war ein Segen Aus diesem Grund haben wir ein Plugin für dieses benutzerdefinierte Tab-Design entwickelt, das derzeit Open Source ist und das Sie in schnellen, einfachen und einfachen Schritten in Ihre Designs implementieren können.

Der erste Weg, wir haben versucht, dies mit den React Native-Komponenten zu tun, aber es hat nicht wie erwartet funktioniert und die Ergebnisse waren nicht genau die gleichen wie geplant. Also haben wir uns eine andere technische Idee ausgedacht, um es zu bauen und mal sehen, was es war. In der Zwischenzeit können Sie auch die Animation aktivieren Dribbble und Behance.

Tab-Leiste

Wir beschließen, an der Idee zu arbeiten, eine vollständige Tab-Leiste mit SVG-Komponenten zu erstellen. Und das Folgende sind die Elemente, die wir zusammengestellt haben, um diese Registerkartenleiste zu erstellen.

  1. Hollow Semi Circular Tabbar
  2. Kreisförmiges Registerkartenelement
  3. Tabbar Item Image
  4. Animation in der Registerkartenleiste und im kreisförmigen Registerkartenelement während des Wechsels.

Die nächste Herausforderung, der wir uns gegenübersahen, war, dass React native SVG nicht unterstützt. Wir müssen also herausfinden, was SVG unterstützen kann, und wir haben eine React-native-svg-Bibliothek gefunden, die ein wichtiger Punkt war, um diese technische Idee zum Laufen zu bringen .

Wir haben eine SVG für Circular Tabbar Item und Hollow Semi Circular Tabbar erstellt.

import Svg,{
  Circle,
  Path
} from 'react-native-svg';

<Svg version="1.1" id="bottom-bar" x="0px" y="0px" width="100%" height="100" viewBox="0 0 1092 260" space="preserve">
        <AnimatedPath fill="#f0f0f0" d={ `M30,60h${this.state.pathX}
.3c17.2,0,31,14.4,30,31.6c0.2,2.7-0.3,5.5-0.3,8.2c0,71.2,58.1,129.6,129.4,130c72.1,0.3,130.6-58,130.6-130c0-2.7-0.1-5.4-0.2-8.1C${this.state.pathY}.7,74.5,${this.state.pathA}.5,60,${this.state.pathB}.7,60H1062c16.6,0,30,13.4,30,30v94c0,42-34,76-76,76H76c42,0-76-34-76-76V90C0,73.4,13.4,60,30,60z` }/>
        <AnimatedCircle ref={ ref => this._myCircle = ref } fill="#f0f0f0" cx="546" cy="100" r="100" />
</Svg>

Als nächstes kam der entscheidende Punkt, der die Registerkartenleiste attraktiv macht, dh die Animation beim Umschalten zwischen zwei Registerkarten.

Nun, wo die Standardeinstellung nicht funktioniert hat, müssen wir der Ersteller sein und eine benutzerdefinierte erstellen, da hier die Standardanimation nicht funktioniert hat, da die Übergangsanimation für die Registerkartenleiste aufgrund der hohlen Krümmung und einer Animation zusammen mit der fehlschlägt Krümmung in der Registerkartenleiste Wir müssen ein benutzerdefiniertes SVG erstellen, das mit dem dynamischen Pfad arbeitet, um eine Animation und Krümmung zu unterstützen.

Im Folgenden finden Sie den Code, der für den Krümmungsübergang verantwortlich ist, sowie den kreisförmigen Tabulator.

<AnimatedPath fill="#f0f0f0" d={ `M30,60h$ {this.state.pathX}
.3c17.2,0,31,14.4,30,31.6c-0.2,2.7-0.3,5.5-0.3,8.2c0,71.2,58.1,129.6,129.4,130c72.1,0.3,130.6-58,130.6-130c0-2.7-0.1-5.4-0.2-8.1C${this.state.pathY}.7,74.5,${this.state.pathA}.5,60,${this.state.pathB}.7,60H1062c16.6,0,30,13.4,30,30v94c0,42-34,76-76,76H76c-42,0-76-34-76-76V90C0,73.4,13.4,60,30,60z`}/>

Wir haben einen Kreis als animierte Komponente und die Registerkartenleiste als animierten Pfad erstellt.

const AnimatedCircle = Animated.createAnimatedComponent(Circle)
const AnimatedPath = Animated.createAnimatedComponent(Path)

Wenn der Benutzer auf die Registerkarte klickt, um zu wechseln, funktioniert die Animation aufgrund der Arbeit mit dem unten geschriebenen Code.

update(index) {
      if(index == 0) {
      this.setState ({
      selectedIndex: index,
      });
      Animated.spring(this.state.pathD,{toValue:22,duration: 10, friction: 10 }).start();
      Animated.spring( this.state.circleRadius, { toValue: 211, friction: 10 } ).start();
      }
      else if(index == 2){
      this.setState({
      selectedIndex: index,
      });

      Animated.spring(this.state.pathD,{toValue:691,duration:10,friction:10}).start();
      Animated.spring( this.state.circleRadius, { toValue: 880, friction: 10 } ).start()}

      else {
      this.setState({selectedIndex: index,});
      Animated.spring(this.state.pathD,{toValue:357,duration:10,friction:10}).start();
      Animated.spring( this.state.circleRadius, { toValue: 546, friction: 10 } ).start();
          }
      }

Was das Registerkartenelement und die Registerkartenleiste attraktiv macht, wird durch Stylen erreicht.

TabBar.Item = TabBarItem;
const styles = StyleSheet.create({
  container: {
    flex: 1,
    overflow: 'hidden',
 },
content: {
    flexDirection:"column",
    zIndex: 0,
    width: (Dimensions.get('window').width - 30),
    marginBottom: '4%',
    left: '4%',
    right: '4%',
 },
subContent: {
    flexDirection: 'row',
    marginLeft: 15,
    marginRight: 15,
    marginBottom: 10,
    zIndex: 1,
    position: 'absolute',
    bottom: 5,
 },
navItem: {
    flex: 1,
    paddingTop: 6,
    paddingBottom: 6,
    alignItems: 'center',
    zIndex: 0,
 },
navImage: {
    width: 45,
    height: 45,
 },
circle: {
    bottom: 18,
 }
});

Festlegen des Standardstatus der Registerkartenleiste im Anfangszustand.

this.state = {
     selectedIndex: 1,
     defaultPage: 1,
     navFontSize: 12,
     navTextColor: "rgb(148, 148, 148)",
     navTextColorSelected: 'rgb(51, 163, 244)',
     circleRadius: new Animated.Value(546),
     pathD: new Animated.Value(357),
     pathX: "357",
     pathY: "675",
     pathA: "689",
     pathB: "706",
     showIcon: true
   }

this.state.circleRadius.addListener( (circleRadius) => {
      this._myCircle.setNativeProps({ cx: circleRadius.value.toString() });
});

Das war also der Code, der im Plugin entwickelt wurde.
Sie können dieses Plugin in Ihrer App verwenden und es großartig aussehen lassen. Lassen Sie uns überprüfen, wie es verwendet wird.

Implementierung

import TabBar from "react-native-tab-bar-interaction";
...
render() {
 return (<TabBar>
        <TabBar.Item
         icon={require('./tab1.png')}
         selectedIcon={require('./tab1_sel.png')}
         title="Tab1"
         screenBackgroundColor={{ backgroundColor: '#008080' }}
     >
        <View>

        </View>
        </TabBar.Item>
        <TabBar.Item
         icon={require('./tab2.png')}
         selectedIcon={require('./tab2_sel.png')}
         title="Tab2"
         screenBackgroundColor={{ backgroundColor: '#F08080' }}
     >
        <View>

        </View>
        </TabBar.Item>
        <TabBar.Item
         icon={require('./tab3.png')}
         selectedIcon={require('./tab3_sel.png')}
         title="Tab3"
         screenBackgroundColor={{ backgroundColor: '#485d72' }}
     >
         <View>

         </View>
         </TabBar.Item>
         </TabBar>);
}

Nach der Installation gemäß der am angegebenen Richtlinie Githubmüssen Sie “React-Native-Tab-Bar-Interaktion” importieren, um die Tabbar in Ihre App einzufügen.

import TabBar from "react-native-tab-bar-interaction";

Tabbar-Element hinzufügen:

<TabBar.Item
       icon={require('./tab1.png')}
       selectedIcon={require('./tab1_sel.png')}
       title="Tab1"
       screenBackgroundColor={{ backgroundColor: '#008080' }}
>

<View>
/*tabbar body content here*/
</View>

* Ihre App muss 3 Registerkarten enthalten.

1. Fügen Sie in dieser Zeile ein nicht ausgewähltes Symbol hinzu.

icon={require('./tab1.png')}

2. Fügen Sie in dieser Zeile das ausgewählte Symbol hinzu.

selectedIcon={require('./tab1_sel.png')}

3. Fügen Sie in dieser Zeile den Tabulatortitel hinzu.

title="Tab1”mind

4. Fügen Sie in dieser Zeile die Hintergrundfarbe des Registerkartenbildschirms hinzu.

screenBackgroundColor={{ backgroundColor: '#008080' }}

Überprüfen Sie den vollständigen Quellcode der React Native-Registerkarte auf Github.

Similar Posts

Leave a Reply