Wie gehe ich mit der Navigation von einer Seite zur anderen in React Native um?

Während der Entwicklung der App möchten wir von einem Bildschirm zum anderen wechseln und dies wird durch die Reaktionsnavigation gehandhabt.

Um an der Navigationsseite zu arbeiten, müssen wir einige Pakete wie unten gezeigt installieren - p>

npm install @react-navigation/native @react-navigation/stack
npm install @react-native-community/masked-view react-native-screens react-native-safe-area-context react-native-gesture-handler

Nach Abschluss der obigen Installation fahren wir nun mit der nächsten Navigationseinrichtung in React Native fort.

Erstellen Sie in Ihrem Anwendungsprojekt einen Ordner namens Pages/. Erstellen Sie zwei js-Dateien HomePage.js und AboutPage.js.

pages/HomePage.js

import * as React from 'react';
import { Button, View, Alert, Text } from 'react-native';
const HomeScreen = ({ navigation }) => {
   return (
      <Button title="Click Here" onPress={() => navigation.navigate(&#39;About&#39;, { name: &#39;About Page&#39; })}/>
   );
};
export default HomeScreen;

Auf der Startseite möchten wir eine Schaltfläche mit der Überschrift „Hier klicken“ anzeigen. Durch Klicken auf diese Schaltfläche wird der Benutzer zum Bildschirm „AboutPage“ weitergeleitet. Die Details von

AboutPage lauten wie folgt:

pages/AboutPage.js

import * as React from 'react';
import { Button, View, Alert, Text } from 'react-native';
const AboutPage = () => {
   return <Text>You have reached inside About Page!</Text>;
};
export default AboutPage;

Auf der Seite „Info“ zeigen wir einfach den Text wie oben gezeigt an.

Jetzt rufen wir die Seite in App.js wie folgt auf:

Die Seite heißt wie folgt:

import HomePage from './pages/HomePage';
import AboutPage from './pages/AboutPage';

Zusätzlich müssen wir den NavigationContainer aus @react-navigation/native importieren, der als Navigationscontainer fungiert. Fügen Sie createStackNavigator aus @react-navigation/stack hinzu.

Rufen Sie createStackNavigator() wie unten gezeigt auf -

const Stack = createStackNavigator();

Jetzt können Sie Seiten zu diesem Stapel hinzufügen, indem Sie als übergeordneten Container verwenden. Stack.Navigation hilft Ihrer App beim Übergang zwischen Bildschirmen, wobei jeder neue Bildschirm oben auf dem Stapel platziert wird.

<NavigationContainer><Stack.Navigator><Stack.Screen name="Home" component={HomePage} options={{ title: &#39;From home page : Navigation&#39; }} /><Stack.Screen name="About" component={AboutPage} />
</Stack.Navigator></NavigationContainer>

Um einen Stapel für den Startbildschirm zu erstellen, gehen Sie wie folgt vor:

<Stack.Screen name="Home" component={HomePage} options={{ title: &#39;From home page : Navigation&#39; }} />

Um einen Stapel für den AboutPage-Bildschirm zu erstellen, gehen Sie wie folgt vor:

<Stack.Screen name="About" component={AboutPage} />

Hier ist der vollständige Code, der beim Navigationsbildschirm in React Native hilft –

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomePage from './pages/HomePage';
import AboutPage from './pages/AboutPage';
const Stack = createStackNavigator();
const MyStack = () => {
   return (
      <Stack.Screen name="Home" component={HomePage} options={{ title: &#39;From home page : Navigation&#39; }} /><Stack.Screen name="About" component={AboutPage} />
      
   );
};
export default MyStack;

Das obige ist der detaillierte Inhalt vonWie gehe ich mit der Navigation von einer Seite zur anderen in React Native um?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!