Detaillierte Erläuterung der grundlegenden Verwendung der Routing-Bibliothek react-navigation6.x

npx reagieren-native init testRN

Garn Android

Garnanfang

Garn hinzufügen @react-navigation/native react-native-screens react-native-safe-area-context @react-navigation/native-stack

  importiere android.os.Bundle;

  @Überschreiben
  geschützt void onCreate(Bundle savedInstanceState) {
    super.onCreate(null);
  }

importiere * als React von „react“;
importiere {Ansicht, Text} von „react-native“;
importiere { NavigationContainer } von '@react-navigation/native';
importiere { createNativeStackNavigator } aus '@react-navigation/native-stack';

Funktion HomeScreen() {
  zurückkehren (
    <Ansichtsstil={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Startbildschirm</Text>
    </Anzeigen>
  );
}

const Stack = createNativeStackNavigator();

Funktion App() {
  zurückkehren (
    // NavigationContainer ist ein Container für Routen, in den alle zugehörigen Inhalte eingefügt werden <NavigationContainer>
      <Stapel.Navigator>
        {/* Stack.Screen ist das geroutete Fenster, Name legt den Fensternamen für den Sprung fest und der Komponenteninhalt des Fensters wird in der Komponente platziert */}
        <Stack.Screen name="Home" Komponente={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Standard-App exportieren;

importiere * als React von „react“;

// Schaltfläche „Hinzufügen“
importiere {Button, Ansicht, Text} von „react-native“;
importiere { NavigationContainer } von '@react-navigation/native';
importiere { createNativeStackNavigator } aus '@react-navigation/native-stack';
                    
                // Navigationsparameter hinzufügen Funktion HomeScreen({navigation}) {
  zurückkehren (
    <Ansichtsstil={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Startbildschirm</Text>
      {/* Sprungschaltfläche hinzufügen */}
      <Schaltfläche
        Titel="Zu den Details gehen"   
        // navigation.navigate('Details') wird zum Springen verwendet, wobei Details auf den entsprechenden Fensternamen zeigt
        beim Drücken={() => navigation.navigate('Details')}
      />
    </Anzeigen>
  );
}

Funktion DetailsScreen() {
  zurückkehren (
    <Ansichtsstil={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Detailbildschirm</Text>
    </Anzeigen>
  );
}

const Stack = createNativeStackNavigator();

Funktion App() {
  zurückkehren (
    // NavigationContainer ist ein Container für Routen, in den alle zugehörigen Inhalte eingefügt werden <NavigationContainer>
      <Stapel.Navigator>
        {/* Stack.Screen ist das geroutete Fenster, Name legt den Fensternamen für den Sprung fest und der Komponenteninhalt des Fensters wird in der Komponente platziert */}
        <Stack.Screen name="Home" Komponente={HomeScreen} />
        <Stack.Screen name="Details" Komponente={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Standard-App exportieren;

<Stack.Screen name="Home" component={HomeScreen} options={{ title: 'mein Zuhause'}} />

<Stack.Screen name="Details" Komponente={DetailsScreen}
   Optionen={({ Route }) => ({ Titel: route.params.title })}
/>

<Schaltfläche
   Titel="Zu den Details gehen"
  // navigation.navigate('Details') wird zum Springen verwendet, wobei Details auf den entsprechenden Fensternamen zeigt
   onPress={() => navigation.navigate('Details', { title: 'Sekundäre Seite' })}
/>

<Schaltfläche
   title="Titel aktualisieren"
   onPress={() => navigation.setOptions({ title: 'Aktualisiert!' })}
/>

Funktion LogoTitel() {
  zurückkehren (
    <Bild
      Stil={{ Breite: 50, Höhe: 50 }}
      Quelle = {erfordert('./src/img/details.png')}
    />
  );
}

<Stack.Screen Name="Home" Komponente={HomeScreen}
   Optionen={{
     Titel: 'Mein Zuhause',
     HeaderTitle: (Requisiten) => <LogoTitle {...Requisiten} />
   }}
/>

        <Stack.Screen Name="Home" Komponente={HomeScreen}
          Optionen={{
            Titel: 'Mein Zuhause',
            headerTitle: (Requisiten) => <LogoTitle {...Requisiten} />,
            headerRight: () => (
              <Schaltfläche
                onPress={() => alert('Das ist ein Button!')}
                Titel="Info"
                Farbe = "fff"
              />
            ),
          }}
        />

        <Stack.Screen name="Details" Komponente={DetailsScreen}
          Optionen={({ Route }) => (
            {
              Titel: route.params.title,
              headerBackImageSource: detailsImg,
            }
          )}
        />