Tiefgreifendes Verständnis des benutzerdefinierten Routing-Managements von React Native

Tiefgreifendes Verständnis des benutzerdefinierten Routing-Managements von React Native

1. Benutzerdefiniertes Routing

Wie wir alle wissen, verfügen alle Betriebssysteme, unabhängig davon, ob sie natives Android oder iOS verwenden, über eine standardmäßige Routing-Stack-Verwaltungsklasse. Da React Native offiziell keine Komponente zur Routenverwaltung bereitstellt, müssen wir zur Verwaltung von Routen die vom React-Navigation-Plug-In bereitgestellte Komponente Stack.Navigator verwenden.

Stack.Navigator verwendet benannte Routen. Die sogenannten benannten Routen bedeuten, dass die Routen deklariert werden müssen, bevor sie verwendet werden können. Um die Verwaltung der Routing-Seiten zu erleichtern, platzieren wir die Routen an einem einheitlichen Ort, beispielsweise im Screens-Paket, wie unten gezeigt.

Anschließend erstellen wir eine neue Konstante in der Datei screens/index.js des Projekts, die hauptsächlich zum Verwalten der deklarierten Routen verwendet wird, wie unten gezeigt.

exportiere const Stapel = [
  {
    Name: 'AllMovieScreen',
    Komponente: AllMovieScreen,
    Optionen: {headerShown: false},
  },
  {
    Name: 'CitySelectScreen',
    Komponente: CitySelectScreen,
    Optionen: {Titel: 'Wählen Sie eine Stadt'},
  },
  .... //Andere Routingseiten auslassen];

Dann erstellen wir eine neue MainStackScreen.js-Datei, um Routing-Sprünge, Rückgaben und andere Vorgänge zu implementieren. Gleichzeitig besteht eine weitere Funktion der MainStackScreen-Klasse darin, den Stil der Navigationsleiste zu vereinheitlichen. Der Code lautet wie folgt.

onst MainStack = createStackNavigator();

Funktion MainStackScreen({navigation}) {
  zurückkehren (
    <MainStack.Navigator
      initialRouteName="App"
      Bildschirmoptionen = {{
        headerTitleAlign: "Mitte",
        Header-Stil: {
          Schattenoffset: {Breite: 0, Höhe: 0},
          Schattenfarbe: '#E5E5E5',
          Hintergrundfarbe: '#fff',
        },
        Geste aktiviert: wahr,
        headerBackTitleVisible: false,
        headerLeft: () => (
          <Berührbare Opazität
            beim Drücken={() => navigation.goBack()}
            Stil={{padding: 10, paddingRight: 30}}>
            <Icon name="chevron-thin-left" size={20} color="#222222" />
          </TouchableOpacity>),
      }}>
      <Hauptstapel.Bildschirm
        name="App"
        Komponente={BottomTab}
        Optionen={{headerShown: false}}/>
      {stacks.map((Element, Index) => (
        <Hauptstapel.Bildschirm
          Schlüssel={index.toString()}
          Name={Artikelname}
          Komponente={item.component}
          Optionen={item.options}/>
      ))}
    </MainStack.Navigator>
  );
}

Standard-MainStackScreen exportieren;

Im obigen Code erstellen wir eine Datei screens/index.js, um die Anwendungsroute zu deklarieren, und verwenden dann die Map-Schleife in der MainStackScreen-Klasse, um die Routenregistrierung abzuschließen. Wie Sie sehen, ist die Routenverwaltung nach der obigen Verarbeitung sehr klar. Wenn eine neue Seite vorhanden ist, müssen Sie die Route nur zur Datei screens/index.js hinzufügen.

2. Tab-Navigation

Bei der Entwicklung von React Native-Anwendungen bietet die React-Navigation nicht nur Routing-Management-Funktionen, sondern unterstützt auch die Tab-Navigation und Drawer-Navigation. Außerdem sind in der neuesten Version die Bibliotheken, von denen die Tab-Navigation, die Drawer-Navigation und die Stapelnavigation abhängen, separat und müssen daher während des Entwicklungsprozesses separat installiert werden.

Für die Tab-Navigation müssen Sie die Bottom-Tabs-Bibliothek installieren, die für die Tab-Navigation im Projekt erforderlich ist. Der Befehl lautet wie folgt.

npm installiere @react-navigation/bottom-tabs    

Die Methode createBottomTabNavigator() wird benötigt, um eine Tab-Navigation zu erstellen. Sie muss zwei Eigenschaften bereitstellen: navigator und route, die jeweils den Komponenten Tab.Navigator und Tab.Screen entsprechen. Schließlich muss die Komponente NavigationContainer verwendet werden, um sie zu umschließen, wie unten gezeigt.

importiere {createBottomTabNavigator} aus '@react-navigation/bottom-tabs';
importiere {NavigationContainer} aus '@react-navigation/native';

: Const BottomTabs = createBottomTabNavigator();

exportiere Standardfunktion BottomTabScreen() {
  zurückkehren (
    <NavigationContainer>
      <BottomTabs.Navigator
        initialRouteName="Startseite"
        Bildschirmoptionen = {({route}) => ({
          tabBarIcon: ({fokussiert}) => {
            zurückkehren (
              <Bildquelle={ fokussiert? tabImage[`${route.name}_active`]
                    : tabImage[route.name]
                }
                Stil = {{Breite: 26, Höhe: 26}}/>
            ); }})}
        tabBarOptions={{
          activeTintColor: "Tomate",
          inactiveTintColor: "grau",
          Stil: {
            Hintergrundfarbe: '#fff',
          },
        }}>
        <BottomTabs.Bildschirm
          Name="Startseite"
          Komponente={HomeScreen}
          Optionen={{
            tabBarLabel: 'Film',
          }}/>
         
.... //Andere Codes weglassen <BottomTabs.Screen
          Name="Meins"
          Komponente={MineScreen}
          Optionen={{
            tabBarLabel: 'Mein',
          }}/>
      </BottomTabs.Navigator>
    </NavigationContainer>
  );
}

Gleichzeitig bietet das Bottom-Tabs-Plug-In auch viele andere nützliche Komponenten und Eigenschaften, die Entwickler entsprechend ihren Anforderungen auswählen können. Führen Sie den obigen Code aus. Der Effekt wird in der folgenden Abbildung angezeigt.

3. Datenrückgabe

Manchmal müssen wir zur nächsten Seite springen und nach der Auswahl der Daten auf der nächsten Seite zurückkehren. Zum Beispiel:

Im obigen Szenario müssen wir die Aktivitätsliste filtern. Nachdem wir zur Aktivitätsfilterseite gesprungen sind, müssen wir den ausgewählten Aktivitätstyp zurückgeben. Wie handhaben wir in diesem Szenario die React-Navigation?

Zuerst registrieren wir die Aktivitätstypseite in der Datei screens/index.js, wie unten gezeigt.

{
  Name: 'SelectorScreen',
  Komponente: SelectorScreen,
  Optionen: nav => {
    Um die Route zu berechnen, müssen Sie sie in der Liste der Routen angeben.
    const {params = {}} = Route;
    const {title = 'Aktivitätstyp', onRightPress = () => {}} = params;
    zurückkehren {
       Titel,
       headerRight: () => (
         <Berührbare Opazität
            beim Drücken={beimRechtsdrücken}
            Stil = {Stile.Button}>
            <Textstil={{Farbe: '#fff', Schriftgröße: 14}}>OK</Text>
         </TouchableOpacity>
        ),
      };
    },
  }

Gleichzeitig werden die Daten der Aktivitätsfilterseite von der Aktivitätslistenseite übergeben. Daher müssen Sie bei der Verwendung nur das oben gekapselte Routing-Tool verwenden, um den Sprungvorgang auszuführen. Der Code lautet wie folgt.

navigieren('SelectorScreen', {
      Werte: Kategorien.Map(c => c.andGroupName),
      Standardwerte: Kategoriename,
      beiBestätigung: Kategorie ändern,
    });

Wie Sie sehen, haben wir beim Springen eine onConfirm-Rückruffunktion definiert, um die von der Filterseite ausgewählten Daten zu erhalten. Als Nächstes empfangen wir die von der vorherigen Seite übermittelten Aktivitätsdaten auf der neu erstellten Aktivitätsfilterseite und zeigen sie mithilfe einer Liste an, wie unten dargestellt.

Funktion SelectorScreen({Navigation, Route}) {
  const {Werte = [], Standardwerte = [], bei Bestätigung} =route.params || {};
  const [ausgewählt, ausgewählt] = useState(Standardwerte);

  const _onRightPress = () => {
    beiBestätigung(ausgewählt);
    navigation.goBack();
  };

  useEffect(() => {
    navigation.setParams({onRightPress: _onRightPress});
  }, [ausgewählt]);

  const beiPressItem = val => {
    sei arr = [];
arr = [Wert];  
setSelected(arr);
  };

  const renderItem = ({item}) => {
    const renderRight = () => {
    const isSelected = ausgewählt.includes(Element);
    zurückkehren (
      <Listenelement
        text={item}
        renderRight={renderRight}
        beim Drücken = {() => beim Drücken des Elements (Element)} />
    );
  };

  zurückkehren (
    <Ansichtsstil={styles.bg}>
      <FlacheListe
        keyExtractor={(Element, Index) => Element + Index}
        Daten={Werte}
        renderItem={renderItem}
        ListFooterComponent={<Ansichtshöhe={120} />} />
    </Anzeigen>
  );
};

const Stile = StyleSheet.erstellen({
 .... // Lassen Sie den Stilcode weg });

Standard-SelectorScreen exportieren;

Wie können wir nach Auswahl des Aktivitätstyps das ausgewählte Ergebnis zur vorherigen Seite zurückbringen? Zu diesem Zeitpunkt wird die oben definierte Rückruffunktion onConfirm verwendet, wie unten gezeigt.

const {Werte = [], Standardwerte = [], bei Bestätigung} =route.params || {};

const _onRightPress = () => {
    onConfirm(selected); //onConfirm-Callback-Funktion gibt Daten zurück navigation.goBack();
 };

Zusammenfassen

Dies ist das Ende dieses Artikels über die benutzerdefinierte Routing-Verwaltung von React Native. Weitere relevante Inhalte zur benutzerdefinierten Routing-Verwaltung von React Native finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:
  • Reagieren Sie auf den nativen ScrollView-Pulldown-Aktualisierungseffekt
  • Eine kurze Analyse der startReactApplication-Methode von React Native
  • Detaillierte Analyse des React Native-Startvorgangs
  • So verwenden Sie Lottie-Animationen in React Native-Projekten

<<:  So verwenden Sie den Linux-Befehl seq

>>:  Django2.* + Mysql5.7-Entwicklungsumgebung Integrations-Tutorial-Diagramm

Artikel empfehlen

Linux verwendet iftop, um den Netzwerkkartenverkehr in Echtzeit zu überwachen

Linux verwendet iftop, um den Verkehr der Netzwer...

MySQL Community Server 5.7.19 Installationshandbuch (detailliert)

Link zum Download der ZIP-Datei auf der offiziell...

Detailliertes Beispiel des MySQL InnoDB-Sperrmechanismus

1. InnoDB-Sperrmechanismus Die InnoDB-Speicher-En...

So verwenden Sie MySQL-Stresstest-Tools

1. MySQLs eigenes Stresstest-Tool – Mysqlslap mys...

HTML Einführungstutorial HTML Tag Symbole schnell beherrschen

Randbemerkung <br />Wenn Sie nichts über HTM...

CentOS 7 SSHD ändern | Root-Login und SSHD-Port-Skriptdefinition verbieten

1. Erstellen Sie einen neuen Benutzer wwweee000 [...

So legen Sie die UTF-8-Kodierung in einer MySQL-Datenbank fest

Ändern Sie die Datei /etc/my.cnf oder /etc/mysql/...

5 Punkte, auf die Sie beim Erstellen einer Webseite achten sollten

1. Farbabstimmungsproblem <br />Eine Webseit...

JS realisiert den Effekt der Baidu News-Navigationsleiste

In diesem Artikel wird der spezifische JS-Code zu...

Einführung in die allgemeine API-Verwendung von Vue3

Inhaltsverzeichnis Veränderungen im Lebenszyklus ...

Beherrschen Sie die häufig verwendeten HTML-Tags zum Zitieren von Inhalten auf Webseiten.

Verwenden Sie „blockquote“ für lange Zitate, „q“ ...