如何在 React Native 中處理從一個頁面到另一個頁面的導航？

在開發應用程式時，我們希望從一個螢幕切換到另一個螢幕，這是透過反應導航來處理的。

要在導航頁面上工作，我們需要安裝一些軟體包，如下所示 - 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

#完成上述安裝後，現在讓我們繼續在 React Native 中進行下一個導航設定。

在您的應用程式專案中建立一個名為 Pages/ 的資料夾。建立2個js檔案HomePage.js和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;

在首頁中，我們要顯示一個標題為「Click Here」的按鈕。按一下該按鈕，使用者將導航至 AboutPage 畫面。

AboutPage 的詳細資訊如下 -

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;

在關於頁面中，我們只是顯示如上所示的文字。

現在讓我們如下呼叫App.js 中的頁面-

頁面的呼叫方式如下-

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

此外，我們需要從@react-navigation/native導入NavigationContainer 將充當導航容器。從 @react-navigation/stack 新增 createStackNavigator。

呼叫 createStackNavigator()，如下所示 -

const Stack = createStackNavigator();

現在您可以使用 作為父容器將頁面新增到此堆疊中。 Stack.Navigation 可協助您的應用程式在螢幕之間進行轉換，其中每個新螢幕都放置在堆疊頂部。

<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>

要為主頁螢幕建立堆疊，請如下完成-

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

要為AboutPage 螢幕建立堆疊，請按如下方式完成-

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

這裡是在React Native 中的導航畫面中提供協助的完整程式碼-

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;

以上是如何在 React Native 中處理從一個頁面到另一個頁面的導航？的詳細內容。更多資訊請關注PHP中文網其他相關文章！