React Native 是一款基于 React 的移动端开发框架，它能够将 React 的组件化思想应用到移动端的开发中。在 React Native 中，路由跳转和页面传参是非常重要的，因为它们是实现页面间跳转和传递数据的基础。本篇文章将详细介绍 React Native 中的路由跳转和页面传参方法，并提供实际的示例代码。
1. 路由跳转
在 React Native 中，我们可以通过导航器（Navigator）来实现路由跳转。导航器是 React Native 提供的一种路由管理机制，它可以帮助我们管理页面的状态、控制页面的生命周期，并提供路由跳转的功能。React Native 中常用的导航器有以下两种：
1.1 StackNavigator
StackNavigator 是一种堆栈导航器，它实现了从屏幕底部弹出和收回一个页面的效果，就像是一个卡片堆叠在另一个卡片上面。使用 StackNavigator，我们可以非常方便地实现页面的入栈和出栈，同时也可以实现页面间的参数传递。
下面是一个基本的 StackNavigator 实现示例：
import { createStackNavigator } from 'react-navigation';
const AppNavigator = createStackNavigator({
Home: { screen: HomeScreen },
Detail: { screen: DetailScreen },
});
export default createAppContainer(AppNavigator);在上面的示例中，我们首先导入了 createStackNavigator，然后定义了一个 AppNavigator 变量，它是一个 StackNavigator 对象，其中 Home 和 Detail 是两个路由，分别对应 HomeScreen 和 DetailScreen 两个组件。注意，我们必须使用 createAppContainer 包装我们的导航器，才能在整个应用中使用它。
接下来是一个示例代码片段，演示如何使用 StackNavigator 进行页面跳转：
// 在 HomeScreen 组件中定义一个跳转函数
const navigateToDetail = () => {
this.props.navigation.navigate('Detail', { itemId: 123 });
};
// 在 HomeScreen 组件中定义一个按钮
<Button title="Go to Detail" onPress={this.navigateToDetail} />;在上面的代码中，我们定义了一个 navigateToDetail 函数，并使用 this.props.navigation.navigate 方法进行页面跳转。其中第一个参数是我们要跳转到的路由名称，第二个参数是我们要传递的参数。
1.2 TabNavigator
TabNavigator 是一种选项卡导航器，它可以实现在不同的标签页间切换。使用 TabNavigator，我们可以很方便地将应用划分为不同的功能模块，每个模块对应一个标签页，实现页面的跳转和参数传递。
下面是一个基本的 TabNavigator 实现示例：
import { createBottomTabNavigator } from 'react-navigation';
const AppNavigator = createBottomTabNavigator({
Home: { screen: HomeScreen },
Settings: { screen: SettingsScreen },
});
export default createAppContainer(AppNavigator);在上面的示例中，我们首先导入了 createBottomTabNavigator，然后定义了一个 AppNavigator 变量，它是一个 TabNavigator 对象，其中 Home 和 Settings 是两个路由，分别对应 HomeScreen 和 SettingsScreen 两个组件。同样，我们也需要使用 createAppContainer 包装我们的导航器。
接下来是一个示例代码片段，演示如何使用 TabNavigator 进行页面跳转：
// 在 HomeScreen 组件中定义一个跳转函数
const navigateToSettings = () => {
this.props.navigation.navigate('Settings', { userName: 'demo' });
};
// 在 HomeScreen 组件中定义一个按钮
<Button title="Go to Settings" onPress={this.navigateToSettings} />;在上面的代码中，我们定义了一个 navigateToSettings 函数，并使用 this.props.navigation.navigate 方法进行页面跳转。其中第一个参数是我们要跳转到的路由名称，第二个参数是我们要传递的参数。
2. 页面传参
在 React Native 中，页面传参是一种非常重要的功能，它可以帮助我们在页面间传递数据，实现不同页面之间的交互。React Native 提供了多种传参方式，如下所示：
2.1 route.params
这是 React Navigation 中最常用的一种传参方式。当我们使用 navigate 或 push 等方法进行页面跳转时，我们可以将参数作为第二个参数传递过去。在被跳转的页面中，可以通过 route.params 来获取传递过来的参数。下面是一个示例代码片段：
// 在 HomeScreen 组件中定义一个跳转函数
const navigateToDetail = () => {
this.props.navigation.navigate('Detail', { itemId: 123 });
};
// 在 DetailScreen 组件中获取参数
const itemId = this.props.route.params.itemId;在上面的代码中，我们使用 navigate 方法进行页面跳转，并将 itemId 参数传递过去。在被跳转到的 DetailScreen 组件中，我们可以使用 this.props.route.params.itemId 来获取传递过来的 itemId 参数。
2.2 navigation.state
这是另一种获取传递参数的方式，它可以通过 navigation.state.params 来获取传递过来的参数。下面是一个示例代码片段：
-- -------------------- ---- -------
-- - ---------- -----------
----- ---------------- - -- -- -
--------------------------------
---------- ---------
------- - ------- --- --
---
--
-- - ------------ -------
----- ------ - ------------------------------------------在上面的代码中，我们使用 navigate 方法进行页面跳转，并将 itemId 参数传递过去。在被跳转到的 DetailScreen 组件中，我们可以使用 this.props.navigation.state.params.itemId 来获取传递过来的 itemId 参数。
2.3 navigation.getParam
这是 React Navigation 中另一种常用的获取传递参数的方式，它可以通过 navigation.getParam 方法来获取传递过来的参数。下面是一个示例代码片段：
// 在 HomeScreen 组件中定义一个跳转函数
const navigateToDetail = () => {
this.props.navigation.navigate('Detail', { itemId: 123 });
};
// 在 DetailScreen 组件中获取参数
const itemId = this.props.navigation.getParam('itemId');在上面的代码中，我们使用 navigate 方法进行页面跳转，并将 itemId 参数传递过去。在被跳转到的 DetailScreen 组件中，我们可以使用 this.props.navigation.getParam('itemId') 方法来获取传递过来的 itemId 参数。
结语
本文详细讲解了 React Native 中的路由跳转和页面传参方法，并提供了实际的示例代码。通过本文的学习，相信大家对 React Native 的路由跳转和页面传参有了更深入的了解，并可以更加灵活地运用到实际开发中。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/6797228b504e4ea9bde29b6e