React-Navigation 是一个流行的 React Native 库，旨在使页面导航变得简单易于使用。
在本文中，我们将详细讲解如何使用 React-Navigation 在 React Native 项目中进行页面导航。我们将看到如何设置导航栏、如何导航到不同屏幕、如何将参数传递给屏幕等。
安装和配置
首先，我们需要安装 React-Navigation 库：
npm install react-navigation
然后，我们需要在我们的项目中导入所需的组件。例如，在 App.js 文件中，我们可以导入StackNavigator组件：
import {createStackNavigator} from 'react-navigation';接着，我们可以创建一个StackNavigator对象：
const AppStackNavigator = createStackNavigator({
Home: {screen: HomeScreen},
Details: {screen: DetailsScreen},
});我们可以替换 HomeScreen 和 DetailsScreen 分别为我们实际使用的屏幕组件。现在我们已经创建了我们的StackNavigator对象，我们可以在我们的应用程序中使用该对象进行页面导航。
设置导航栏
有不同的选择来设置StackNavigator的导航栏，例如使用默认导航栏或者自定义导航栏。默认导航栏包括一个标题和一个返回按钮。您可以通过以下方式将默认导航栏添加到屏幕中：
static navigationOptions = {
title: 'Home',
};现在，我们已经设置了默认导航栏，并且它将显示屏幕的标题。我们可以在我们的屏幕组件中使用 this.props.navigation 对象来导航到其他屏幕。
导航到不同屏幕
我们可以使用 this.props.navigation.navigate() 方法来导航到其他屏幕。例如：
<Button
title="Go to Details"
onPress={() => this.props.navigation.navigate('Details')}
/>在这个例子中，我们将导航到 Details 屏幕。这将显示一个标题为“Details”的导航栏，并在屏幕上显示DetailsScreen组件的内容。
传递参数
我们可以通过 navigate 方法的第二个参数将参数传递给下一个屏幕。例如：
<Button
title="Go to Details"
onPress={() => this.props.navigation.navigate('Details', { itemId: 86, otherParam: 'Hello' })}
/>在这个例子中，我们将 itemId 和 otherParam 参数传递给Details屏幕。我们可以在 DetailsScreen 组件中使用 this.props.navigation.getParam() 方法来获得这些参数。
-- -------------------- ---- -------
----- ------------- ------- --------------- -
------ ----------------- - -- ---------- -- -- -
----- - ------ - - -----------------
------ -
------ ------ - ----------------- - -- ------ ------- --------
-
--
-------- -
----- - ---------- - - -----------
----- ------ - ----------------------------- ---------
----- ---------- - --------------------------------- ----- ------- --------
------ -
----- -------- ----- -- ----------- --------- --------------- -------- ---
------------- -------------
------------- -------------------------------
----------------- -----------------------------------
-------
--
-
-在这个例子中，我们将从 navigation.getParam() 方法中获取参数 itemId 和 otherParam，并在屏幕上显示它们的值。
总结
React-Navigation 是一个在 React Native 项目中进行页面导航的流行库。在本文中，我们了解了如何安装和配置React-Navigation、如何设置导航栏、如何导航到不同屏幕以及如何传递参数。这些知识对于编写 React Native 应用程序非常重要，希望对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e9fe35f6b2d6eab35214ee