如何在 React Native 中处理从一个页面到另一个页面的导航？

2023-06-07 14:08:03 71

在开发应用程序时，我们希望从一个屏幕切换到另一个屏幕，这由React导航处理。

要在导航页面上工作，我们需要安装几个软件包，如下所示-

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

完成上述安装后，让我们现在继续在ReactNative中进行下一个导航设置。

在您的应用项目中创建一个名为pages/的文件夹。创建2个js文件HomePage.js和AboutPage.js。

页面/HomePage.js

import * as React from 'react';
import { Button, View, Alert, Text } from 'react-native';
const HomeScreen = ({ navigation }) => {
   return (

在主页中，我们希望显示一个标题为ClickHere的按钮。Onclick按钮，用户将导航到AboutPage屏幕。

关于页面的详细信息如下-

页面/关于Page.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;

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

现在让我们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中。Stack.Navigation帮助您的应用程序在每个新屏幕放置在堆栈顶部的屏幕之间进行转换。

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

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

这是在ReactNative中帮助导航屏幕的完整代码-

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;

如何在 React Native 中处理从一个页面到另一个页面的导航？

热门推荐

随机推荐