在开发应用程序时，我们希望从一个屏幕切换到另一个屏幕，这是通过反应导航来处理的。
要在导航页面上工作，我们需要安装一些软件包，如下所示 - p>npm install @react-navigation/native @react-navigation/stacknpm 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('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 <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: 'from home page : navigation' }} /><stack.screen name="about" component={aboutpage} /></stack.navigator></navigationcontainer>
要为主页屏幕创建堆栈，请按如下方式完成 -
<stack.screen name="home" component={homepage} options={{ title: 'from home page : navigation' }} />
要为 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 ( <navigationcontainer><stack.navigator><stack.screen name="home" component={homepage} options={{ title: 'from home page : navigation' }} /><stack.screen name="about" component={aboutpage} /> </stack.navigator></navigationcontainer> );};export default mystack;
以上就是如何在 react native 中处理从一个页面到另一页面的导航？的详细内容。