如何在 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 (
       navigation.navigate('About', { name: 'About Page' })}/>
   );
};
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 You have reached inside About Page!;
};
export default AboutPage;

在关于页面中，我们只是显示如上所示的文本。

现在让我们按如下方式调用 App.js 中的页面 -

AmEav WebSite 企业网站管理系统1.0

系统功能强大、操作便捷并具有高度延续开发的内容与知识管理系统，并可集合系统强大的新闻、产品、下载、投票、人才、留言、在线订购、搜索引擎优化、等功能模块，为企业部门提供一个简单、易用、开放、可扩展的企业信息门户平台或电子商务运行平台。开发人员为脆弱页面专门设计了防刷新系统，自动阻止恶意访问和攻击；安全检查应用于每一处代码中，每个提交到系统查询语句中的变量都经过过滤，可自动屏蔽恶意攻击代码，从而全面防

下载

页面的调用方式如下 -

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

此外，我们需要从 @react-navigation/native 导入 NavigationContainer 将充当导航容器。从 @react-navigation/stack 添加 createStackNavigator。

调用 createStackNavigator()，如下所示 -

const Stack = createStackNavigator();

现在您可以使用 作为父容器将页面添加到此堆栈中。 Stack.Navigation 可帮助您的应用在屏幕之间进行转换，其中每个新屏幕都放置在堆栈顶部。

要为主页屏幕创建堆栈，请按如下方式完成 -

要为 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 (
      
      
   );
};
export default MyStack;