概述
React Nav 是一个 React Native 的导航工具包，封装了常用的导航功能，可以帮助开发者快速构建导航页面，提高开发效率。
本篇文章将介绍如何安装和使用 React Nav，并提供完整的示例代码和详细的说明。
安装
使用 npm 安装 React Nav：
npm install react-nav --save
你也可以使用 Yarn：
yarn add react-nav
使用
首先，导入 React Nav：
import {StackNavigator} from 'react-nav';然后，创建一个 StackNavigator：
const App = StackNavigator({
Home: { screen: HomeScreen },
Details: { screen: DetailsScreen },
});其中，HomeScreen 和 DetailsScreen 是你自己创建的 React 组件，在本例中分别对应导航的首页和详情页。
注意，如果你使用的是 React Native 0.60 版本及以上，请将 App 组件导出：
export default App;
接着，将 StackNavigator 渲染到页面中：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- ----- ---- ------- --------------- -
-------- -
------ -
---- --
--
-
-这样，在你的应用程序中就会有了一个可以导航到首页和详情页的导航器。
导航
在你的组件中，可以使用 this.props.navigation 对象来进行导航操作。
例如，要在 HomeScreen 页面中导航到 DetailsScreen 页面：
onPressButton() {
const {navigate} = this.props.navigation;
navigate('Details', {title: '详情页'});
}其中，navigate 方法接收两个参数：要导航到的页面名称和可选的参数对象，用于传递参数到目标页面。
在 DetailsScreen 页面中，可以获取传递的参数：
render() {
const {params} = this.props.navigation.state;
const title = params ? params.title : null;
...
}标题和样式
你可以使用 navigationOptions 对象来设置页面标题和样式。
例如，要在 DetailsScreen 页面中设置标题：
class DetailsScreen extends React.Component {
static navigationOptions = {
title: '详情页',
};
...
}这样，在导航栏中就会显示 详情页 标题。
你也可以使用 headerStyle 和 headerTitleStyle 属性来自定义导航栏样式：
-- -------------------- ---- -------
------ ----------------- - -
------ ------
------------ -
---------------- ----------
--
----------------- -
------ -------
--------- ---
--
--完整示例代码
以下是一个完整的使用 React Nav 构建的简单应用程序，包含了两个页面：首页和详情页。
-- -------------------- ---- -------
------ ----- ---- --------
------ ------------ ----- ----------------- ----- ---- ---------------
------ ---------------- ---- ------------
----- ---------- ------- --------------- -
------ ----------------- - -
------ -----
--
-------- -
----- ---------- - ----------------------
------ -
----- -------------------------
----------------- --------------------- ----------- -- ------------------- ------- ---------
----- ---------------------------------
-------------------
-------
--
-
-
----- ------------- ------- --------------- -
------ ----------------- - -
------ ------
------------ -
---------------- ----------
--
----------------- -
------ -------
--------- ---
--
--
-------- -
----- -------- - ----------------------------
----- ----- - ------ - ------------ - -----
------ -
----- -------------------------
----- ----------------------------------
----- -----------------------------------
-------
--
-
-
----- --- - ----------------
----- - ------- ---------- --
-------- - ------- ------------- --
---
------ ------- ----
----- ------ - -------------------
---------- -
----- --
--------------- ---------
----------- ---------
--
------- -
---------------- ----------
-------- ---
------------- --
--
----- -
------ -------
--------- ---
--
------ -
--------- ---
------- ---
--
---总结
本文介绍了如何使用 React Nav 构建导航页面，并提供了完整的示例代码。希望这篇教程能够帮助你更高效地开发 React Native 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005520b81e8991b448cf8ea