React Native 是一种基于 React 的开源框架，可以用来构建高质量的 iOS 和 Android 应用。在 React Native 中，React-Navigation 是一个流行的第三方库，它可以帮助我们实现导航和路由切换。在本文中，我们将会介绍如何在 React Native 中使用 React-Navigation 实现页面路由切换的方法。
安装 React-Navigation
在开始之前，我们需要先安装 React-Navigation 库。我们可以使用 npm 或者 yarn 来进行安装，这里我们以 npm 为例：
npm install react-navigation
实现页面路由切换
在 React-Navigation 中，路由是一个对象，它将屏幕组件映射到应用程序导航中的一个场景。下面是一个简单的例子，我们可以通过实现一个基本的 Stack Navigator 来演示路由的使用方法。
首先，我们需要导入 StackNavigator 组件：
import { StackNavigator } from 'react-navigation';然后，我们可以定义一个路由配置对象，它将屏幕组件映射到路由名称：
const AppNavigator = StackNavigator({
Home: { screen: HomeScreen },
Profile: { screen: ProfileScreen },
});以上代码中，HomeScreen 和 ProfileScreen 是两个屏幕组件，它们将会被映射到路由配置对象中的 Home 和 Profile 属性。
最后，我们需要将 AppNavigator 组件渲染到应用程序中：
-- -------------------- ---- -------
----- --- ------- --------------- -
-------- -
------ -
----- -------- ----- - ---
------------- --
-------
--
-
-当我们定义好了路由配置对象并将其渲染到应用程序中后，我们就可以使用 navigate 方法来实现页面路由切换了。
在屏幕组件中，我们可以通过 navigation 属性来访问路由导航器，然后调用 navigate 方法来切换到指定的路由名称：
-- -------------------- ---- -------
----- ---------- ------- --------------- -
-------- -
----- - -------- - - ----------------------
------ -
------
---------- -- --- ---- --------------
-------
----------- -- ------------------- - ----- ------ ---
--------- -- --------
--
-------
--
-
-以上代码中，我们使用 navigate 方法来跳转到 Profile 路由，并传递了一个参数 name。
在 ProfileScreen 组件中，我们需要通过 navigation 属性来获取传递过来的参数：
-- -------------------- ---- -------
----- ------------- ------- --------------- -
-------- -
----- - ------ - - ----------------------------
------ -
------
---------- -- --------------- ---------------
-------
--
-
-在上面的例子中，我们展示了如何使用 React-Navigation 实现页面路由切换。在实际应用中，你可以根据自己的需求来定义不同类型的导航器和路由配置对象。
总结
在本文中，我们介绍了如何在 React Native 中使用 React-Navigation 实现页面路由切换的方法。我们通过实现一个基本的 Stack Navigator 来演示了路由配置对象和页面路由切换的过程。通过本文的学习，读者可以了解到 React-Navigation 的基本使用方法，可以帮助你更好地开发 React Native 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651fd76295b1f8cacd761b99