简介
React Navigation 是一个用于 React Native 应用的导航库。它使得在应用程序中添加基于堆栈的导航变得非常容易，同时还提供了许多其他功能，如选项卡、侧边菜单和模态框等。
在本文中，我们将学习如何在 React Native 应用程序中使用 React Navigation 进行导航。
安装和设置
首先，打开终端并进入您的 React Native 项目目录。使用以下命令安装 React Navigation：
npm install @react-navigation/native
接下来，还需要安装 React Navigation 堆栈导航器。使用以下命令来执行安装：
npm install @react-navigation/stack
一旦安装完成，您需要设置 React Navigation。要做到这一点，请首先在应用程序的根组件中导入所需的库：
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';然后，使用 createStackNavigator() 函数创建一个堆栈导航器：
const Stack = createStackNavigator();
接下来，为每个屏幕创建一个组件，并将这些屏幕添加到堆栈导航器中：
-- -------------------- ---- -------
-------- ----- -
------ -
---------------------
-----------------
------------- ----------- ---------------------- --
------------- --------------- -------------------------- --
------------------
----------------------
--
-在这个例子中，我们在堆栈导航器中创建了两个屏幕：“首页”和“设置”。您可以在导航器中添加任意数量的屏幕。
最后，将堆栈导航器的组件添加到应用程序的根组件中：
export default App;
屏幕之间的导航
React Navigation 使屏幕之间的导航变得非常容易。要导航到另一个屏幕，只需要使用 navigation.navigate() 函数：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- ---- - ---- ---------------
-------- ------------ ---------- -- -
------ -
------
-------
--------- -- ---------
----------- -- --------------------------------
--
-------
--
-在这个例子中，我们在“首页”屏幕上添加了一个按钮。当用户点击该按钮时，将导航到“设置”屏幕。
传递参数
在某些情况下，您可能需要将参数传递给要导航的屏幕。要做到这一点，您可以在 navigation.navigate() 函数中包含一个参数对象：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- ---- - ---- ---------------
-------- ------------ ---------- -- -
------ -
------
-------
--------- -- ---------
----------- --
------------------------------- - ------- --------------- --
-
--
-------
--
-在这个例子中，我们将一个名为“通知”的屏幕作为参数传递给“设置”屏幕。
要在目标屏幕中访问这些参数，请使用 route.params 对象：
import React from 'react';
import { Text } from 'react-native';
function SettingsScreen({ route }) {
return <Text>{route.params.screen}</Text>;
}在这个例子中，我们在“设置”屏幕上显示了传递的“通知”参数。
示例代码
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- ----- ---- - ---- ---------------
------ - ------------------- - ---- ---------------------------
------ - -------------------- - ---- --------------------------
----- ----- - -----------------------
-------- ------------ ---------- -- -
------ -
------
---------- -- --- ---- -------------
-------
--------- -- ---------
----------- -- ------------------------------- - ------- --------------- ---
--
-------
--
-
-------- ---------------- ----- -- -
------ -----------------------------------
-
------ ------- -------- ----- -
------ -
---------------------
-----------------
------------- ----------- ---------------------- --
------------- --------------- -------------------------- --
------------------
----------------------
--
-总结
在本文中，我们学习了如何在 React Native 应用程序中使用 React Navigation 进行导航。我们了解了如何设置堆栈导航器、如何在屏幕之间导航，并演示了如何传递参数。React Navigation 是 React Native 应用程序中一个非常流行和强大的库，帮助我们轻松地为我们的应用程序添加导航。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65719746d2f5e1655da47c9f